Change style of selectmenu items (CSS)

Question

I have select. I it I have some of items.

I need to change style of it

Here is html of this select

 <ul class="facilities hide-small">
     <li class="airline">
         <select name="search[airline]" id="search_airline" class="custom">
            <option value="">Alla</option>
            <option value="SK">SAS</option>
            <option value="DY">Norwegian</option>
            <option value="EI">Aer Lingus</option>
            <option value="SU">Aeroflot</option>
            <option value="AR">Aerolineas Argentinas</option>
            <option value="AM">Aeromexico</option>
            <option value="BT">Air Baltic</option>
            <option value="AC">Air Canada</option>
            <option value="CA">Air China</option>
            <option value="UX">Air Europa</option>
            <option value="AF">Air France</option>
            <option value="AI">Air India</option>
            <option value="NZ">Air New Zealand</option>
</select>
            </li>

I need to change style of options, so I wrote this in css.

#search_airline.ui-menu-item-wrapper{
  background: #e4e4e4;
  color: #2311b2;
  font-size: 14px;
    border: 1px solid #b9b9b9;
    border-radius: 0px 0px 3px 3px;
    font-family: 'Roboto Condensed', sans-serif;
}

But it not works

If i wrote like this

.ui-menu-item-wrapper{
  background: #e4e4e4;
  color: #2311b2;
  font-size: 14px;
    border: 1px solid #b9b9b9;
    border-radius: 0px 0px 3px 3px;
    font-family: 'Roboto Condensed', sans-serif;
}

All works great

Here is screenshot

where is my problem can be?

_"But it not works, where is my problem can be?"_ - the first problem is that you are not giving us a proper problem description - so please go read [ask]. Describe _what exactly_ "doesn't work". Secondly, if this is about specific styles like the borders and their radius - browsers don't let you apply just any kind of styling to native input fields, you are very limited in what you can do with them. If you prior research on the topic did not turn up _that_ information, then I question if you have actually done any - this is a topic that has been discussed broadly already. — CBroe, Apr 08 '18 at 10:06
Use this. https://stackoverflow.com/questions/8430279/how-to-style-the-option-with-only-css — deEr., Apr 08 '18 at 10:07

score 1 · Answer 1 · answered Apr 08 '18 at 10:04

1

You can't change the style of <option> via css, as it is rendered by user's OS not HTML.

answered Apr 08 '18 at 10:04

Ash

473
2
10

I edited question – Balance Apr 08 '18 at 10:40

score 1 · Answer 2 · answered Apr 08 '18 at 10:05

1

You can't style option field. Because it have cross browser issue. Instead of you can use Select2.

answered Apr 08 '18 at 10:05

Rahul

2,011
3
18
31

I edited question – Balance Apr 08 '18 at 10:39

Change style of selectmenu items (CSS)

2 Answers2