HTML CSS
(quick & simple example)
SIMPLY WRAP <SELECT> IN A <DIV> <div class="sel"><select> <option>One</option> <option>Two</option> </select></div>
HIDE DEFAULT ARROW + USE HTML SYMBOL TO CREATE CUSTOM ARROW .sel select { appearance: none; } .sel::after { content: "\25b6"; }
"EXPAND" SELECT BOX .sel select { width: 100%; padding: 10px; color: #333; border: 1px solid #cfcfcf; }
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%); }