There is a list, select edges are rounded and now the caret arrow looks ugly and sticks to the right side. Question: Is it possible to shift it to the left by 20px using styles and cross-browser or without js in any way?

This is not a duplicate question, because I’m completely satisfied with the standard hand, I don’t want to change it to a picture - the question is: can it be shifted with any tricks or not?

 select { border-radius: 50px; padding-left: 20px; height: 44px; width: 200px; } 
 <select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select>

  • 2
    Possible duplicate question: How to replace the arrow (caret) select? - Legionary
  • @Legionary is not, I asked not how to replace the arrow, it suits me, but to move. using pagging , margin , pseudo-elements or something else - Vasya
  • This is done to attract your attention, that you cannot change the position of the arrow, only the visual display of the arrow itself. - Legionary
  • @Legionary understand. resolved the issue below - Vasya

2 answers 2

You can change the arrow to your own, and move it as you need

Example here

  • and if I don’t need to change it for some other one, this one suits me - I can move it with the help of some tricks or not? - Vasya
  • Unfortunately this is not possible - tCode
  • There is a trick, it is banal, it is strange that no one here has ever invented it - it solved the question - Vasya
  • @tCode, it is worth moving the main to the answer. Link responses are not welcome. - Grundy
  • @Grundy see no reason to duplicate information - tCode

I came up with a banal solution that saves the situation.

 body { background-color:gray; } div { border-radius: 50px; padding-left: 20px; height: 44px; width: 200px; background-color: white; } select { border: none; height: 44px; width: 180px; } select:focus { outline: none; } 
 <div> <select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select> </div>