HTML CSS

CUSTOMIZED DROPDOWN ARROW

(quick & simple example)

SIMPLY WRAP <SELECT> IN A <DIV> <div class="sel"><select>   <option>One</option>   <option>Two</option>  </select></div>

THE HTML

01

HIDE DEFAULT ARROW + USE HTML SYMBOL TO CREATE CUSTOM ARROW .sel select { appearance: none; } .sel::after { content: "\25b6"; }

THE CSS PART A

02

"EXPAND" SELECT BOX .sel select {   width: 100%; padding: 10px; color: #333;   border: 1px solid #cfcfcf; }

THE CSS PART B

03

OPTIONAL - ROTATE ARROW ON HOVER .sel::after { transition: all 0.3s; } .sel:hover::after {   transform: translateY(-50%);   rotate(90deg); color: #ff1212; }

POSITION DROPDOWN ARROW .sel { position: relative; } .sel::after {   position: absolute; top: 50%; right: 10px;   transform: translateY(-50%); }