HTML CSS

CUSTOMIZED DROPDOWN ARROW WITH CSS

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

THE HTML

01

HIDE DEFAULT DROPDOWN ARROW .csel select { appearance: none; }

CUSTOM DROPDOWN ARROW

02

CUSTOM DROPDOWN ARROW .csel::after { content: "\25b6"; }

POSITION DROPDOWN ARROW .csel { position: relative; } .csel::after {   position: absolute; top: 0; right: 0; }

THE DIMENSIONS

03

MAKE <SELECT> FILL <DIV> .csel select { width: 100%; }

STANDARD HEIGHT .csel, .csel::after, .cselect select {   box-sizing: border-box;   height: 40px; }

TURN DROPDOWN BOX SQUARE .csel::after { width: 40px; }