How to Apply CSS to a MAC Chrome Select Box

How to apply CSS to a Mac Chrome Select Box?

You need to apply -webkit-appearance:none; when adding CSS to select elements in webkit browsers.

DEMO http://jsfiddle.net/XxkSC/3830/

Select box `appearance` on Mac /safari or chrome

I added an image as a background to the select field, some people recommended it and its working great.
simply add bellow to .select in the css:

  background: #fff;
  border-radius: 0;
  -webkit-appearance: none;
  /* **this should be your icon or image to replace the down arrow** */
  background :url('http://via.placeholder.com/10x10') 95% no-repeat;
  background-color: #fff;
  background-position: right;
  background-size: 14px;

how to control select tag in chrome(Mac os)?

The CSS appearance property controls whether native styling applicable to your OS is used when drawing the field. Set it to none to disable native styling and do your own thing.

select {
    -webkit-appearance: none;
    appearance: none;
}

This article may give you some more clues.

select {
    font-size: 30px;
}
.better {  
    -webkit-appearance: none;
    appearance: none;
  border: 1px solid #ff8200;
  background-color: #eee;
  border-radius: 3px;
  padding: 0.5em;
}

<p>This select is native to your OS</p>
<select>
    <option>all</option>
    <option>opt1</option>
    <option>opt2</option>
</select>
<p>This select is styled with CSS</p>
<select class="better">
    <option>all</option>
    <option>opt1</option>
    <option>opt2</option>
</select>

How do you style a select option on OSX Microsoft Edge

I test on Chrome for Mac OSX, it has the same issue. I searched and found that it's a known issue of Mac OS. You can refer to this similar thread and this issue report link.

There's no solution to style the <option> for WebKit browsers on Mac OS for now as it is provided by the native system select. If you really need to use styled <option> on Mac OS, I'm afraid you can only write your own select component using <ul>,<li> and style them using CSS.

Change html select option:disable text color on Mac Chrome and Safari

It's a bug in chrome.

No style is applied in the option of select in Mac

---

Related Topics