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; }