0

Since last update on mac OS systems there are pretty much differences between form components. What I am trying to achive is to modify the select in order to have the same viewing on windows and mac OS.enter image description here The thing is I want to have the same styling on mac and windows of select > options because is very different on these two OS and I was trying to create a fiddle and to apply some css to select and option but seems that is imposible to change the styling on mac. Does anyone managed to change the styling of select on mac ?

aynber
  • 22,380
  • 8
  • 50
  • 63
BurebistaRuler
  • 6,209
  • 11
  • 48
  • 66

1 Answers1

2

You need to add -webkit-appearance:none; in order to apply style changes on the select, however, you cannot change the option styles other than color and background-color as described here: https://stackoverflow.com/a/17203491/6178832

If you want the exact styles over all platforms, you will have to create your own select component. Simple how to to get you started.

Example of webkit-appearance: 

select {
  -webkit-appearance:none;
  border-radius: 0;
  padding: 5px;
  background: #fff;
}
<select id="pet-select">
    <option value="">--Please choose an option--</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="hamster">Hamster</option>
    <option value="parrot">Parrot</option>
    <option value="spider">Spider</option>
    <option value="goldfish">Goldfish</option>
</select>
Sølve T.
  • 4,159
  • 1
  • 20
  • 31
  • That is preatty fine but I just tried to remove the border radius of options panel and also to align the options under the parent select. – BurebistaRuler Aug 02 '18 at 10:21
  • 1
    As I said, this is not possible today as far as I know. If you want to make changes to the options panel, you have to ditch the `select` element and create your own – Sølve T. Aug 02 '18 at 12:10