Search code examples
jquerycsshtmlweb-frontend

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?

Solution

  • 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(http://www.stackoverflow.com/favicon.ico) 95% / 20% no-repeat #fff;
}

    https://jsfiddle.net/yorknche/