CODEWITHSUNDEEP
htmlcssdrop-down-menu
loveloper.dev
loveloper.dev

Reputation: 521

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

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 :

enter image description here

this is picture after I clicked :
enter image description here

I want to make my select box like this:
enter image description here

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

Upvotes: 0

Views: 1330

Answers (1)

Brett Donald
Brett Donald

Reputation: 14117

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>

Upvotes: 1

Related Questions