CODEWITHSUNDEEP
htmlcss
Mihai012
Mihai012

Reputation: 31

How to change the arrow icon from a select list

I want wo change this icon from my select list enter image description here

into this icon enter image description here

I tried several code from stackoverflow with this type of question but they don't work.

Upvotes: 0

Views: 997

Answers (1)

TechySharnav
TechySharnav

Reputation: 5084

You can use appearnace: none CSS property, with ::after selector. You can use custom symbol, inside ::after using content property.

div {
  position: relative;  
  float: left;
  min-width: 200px;
  margin: 50px 33%;
}


div::after {
  content: '>';
  font: 17px "Consolas", monospace;
  color: #333;
  transform: rotate(90deg);
  right: 15px;
  top: 18px;
  padding: 0 0 2px;
  position: absolute;
  pointer-events: none;
}

div select {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  max-width: 320px;
  height: 50px;
  float: right;
  margin: 5px 0px;
  padding: 0px 24px;
  font-size: 16px;
  background-color: #ffffff;
}
<div>
  <label>
      <select>
          <option selected> Select Box </option>
          <option>Option 1</option>
          <option>Option 2</option>
          <option>Option 3</option>
      </select>
  </label>
</div>

Upvotes: 1

Related Questions