How to center text in select?

Question

I have this example. I need to unite selected text in select and arrow and put it in the center. How can i do this? I want that any selected text always will be in the center with arrow. Maybe i can use something insted select? I need dropdown menu like this: http://prnt.sc/c8iorl Maybe select isn't what i need for this type menu?

.filter-col {
  display: inline-block;
  margin: 0 15px;
  border: 1px solid black;
}
.filter-col select {
  width: 100%;
  padding: 0 15px 0 0;
  border: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  text-indent: 0.01px;
  text-overflow: '';
  -ms-appearance: none;
  appearance: none!important;
  background-image: url(http://foodservice.freelancerblog.ru/images/i/sort-bottom-arrow.png);
  background-position: right center;
  background-repeat: no-repeat;
  color: #8d8d8d;
  font-size: 18px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  text-align: right;
}

<div class="filter-col">
  <select name="" id="">
    <option value="">Text</option>
    <option value="">Text11</option>
    <option value="">Text2222</option>
    <option value="">Text3333333333</option>
  </select>
</div>

Possible duplicate of [Is it possible to center text in select box?](http://stackoverflow.com/questions/10813528/is-it-possible-to-center-text-in-select-box) — mplungjan, Aug 21 '16 at 14:15
It can help me to center the text but i also need to put arrow (background image) right near the text — user2516034, Aug 21 '16 at 14:32

How to center text in select?

0 Answers0