How to change the arrow icon from a select list

Question

I want wo change this icon from my select list

into this icon

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

Answer 1

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>