Is it possible to change the arrow on the right (caret) without replacing the entire background? That is, I want to be able to replace the arrow icon, but not touch the rest of the select view.

I saw a solution that replaces the background entirely with a new image. We will not consider this decision.

I wouldn't want to use a modified button either.

 <select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select>

  • one
    you can't just replace it - stylization is not provided It is necessary to dance a little with a tambourine, for example, if in a nutshell, you can create a layer on top of it and put the desired picture in place of the arrow through the pseudo-element. but then it will not be clickable. - lexxl

1 answer 1

maybe so?

 .select { position: relative; display: inline-block; } .select:after { content: "▼"; padding: 0 8px; font-size: 12px; position: absolute; right: 8px; top: 4px; z-index: 1; text-align: center; width: 10%; height: 100%; pointer-events: none; box-sizing: border-box; } select { padding-right: 25px; -webkit-appearance: none; -moz-appearance: none; appearance: none; } 
 <div class="select"> <select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select> </div>

It’s impossible to make a cross-browser (so that it looks the same everywhere), because select cannot be completely styled.

  • It is interesting. Thank. But in FF it looks strange. Is it possible to cross-browser somehow? - LEQADA
  • jsfiddle.net/soledar10/1pcfz8ve - soledar10
  • Safari makes a big difference. i.imgur.com/eJkEdrZ.png - LEQADA
  • 2
    this is because select cannot be fully styled - soledar10
  • Please add your last comment in response in a slightly expanded form. - LEQADA