Good evening!

How to add just such an arrow in select?

enter image description here

Preference - FontAwesome. It will not work through the Background, because the background of the Select itself is set through it, nothing appears at all after ...

CSS markup:

select { width: 225px; height: 55px; padding: 0 15px 2.5px 20px; color: #fff; margin: 40px 10px 15px 10px; font-family: GothamL; background: url("../img/searchselect.png"); border: none; font-size: 18px; background-repeat: no-repeat; overflow: auto; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none; &:after { content: "▼"; padding: 0 8px; font-size: 12px; position: absolute; right: 8px; top: 4px; z-index: 1; text-align: center; width: 10%; height: 100%; pointer-events: none; box-sizing: border-box; }

HTML:

  <select class="selection"> <option>Dubai</option> <option>Dubai</option> <option>Dubai</option> <option>Dubai</option> <option>Dubai</option> <option>Dubai</option> <option>Dubai</option> <option>Dubai</option> </select>

    2 answers 2

     body { background: #ccc; } * { outline: none; } .select-box { position: relative; display:inline-block; margin: 40px 10px 15px 10px; } .select-box:after { content: "▼"; color:#fff; padding: 0 8px; font-size: 12px; position: absolute; right: 15px; top: 50%; margin-top:-7px; z-index: 1; text-align: center; pointer-events: none; box-sizing: border-box; } select { width: 225px; height: 55px; padding: 0 15px 2.5px 20px; color: #fff; font-family: GothamL; background: rgba(255, 255, 255, 0.1); border-radius: 28px; border: #fff solid 1px; font-size: 18px; background-repeat: no-repeat; overflow: auto; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none; } select option { color:#000; } 
     <div class="select-box"> <select class="selection"> <option>Dubai</option> <option>Dubai</option> <option>Dubai</option> <option>Dubai</option> <option>Dubai</option> <option>Dubai</option> <option>Dubai</option> <option>Dubai</option> </select> </div>

      Here is an example for asterisks:

       content: "\f005\f005\f005"; font-family: FontAwesome;