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

Question

Although I only coded like this

<select>
    <option>all</option>
    <option>opt1</option>
    <option>opt2</option>
</select>

my select box turns black when I click this.
this is picture before I clicked :

this is picture after I clicked :

I want to make my select box like this:

is there anyone who knows what I should do ? :(

The options are rendered by the OS, you can't style them. You can replace the whole select with a JS solution, there are tons of libraries for this sort of stuff, chose one that fit's your need. — cloned, Aug 09 '21 at 05:36
Does this answer your question? [How to style a select tag's option element?](https://stackoverflow.com/questions/5887133/how-to-style-a-select-tags-option-element) — cloned, Aug 09 '21 at 05:37

Brett Donald · Accepted Answer · 2021-08-09T07:31:14.303

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 to control select tag in chrome(Mac os)?

1 Answers1