alimarwan alimarwan - 2 months ago 6
CSS Question

Changing HTML "select" tag's default arrow

enter image description here

I am trying to change the HTML "select" tag's default arrow to the one similar in the photo attached. Any ideas please?


Here's a pure CSS solution: You could hide the default arrow and display another one using a background image. This is an example which you can customize based on your needs.

select {
  width: 100px;
  padding-left: 5px;
  border: 1px solid #ccc;
  height: 25px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url( 95% / 20% no-repeat #fff;