Run
<!doctype html> <html lang="en"> <head> <title>CSS Change Select Dropdown Arrow</title> <style> body{ padding: 20px; } .SelArrBg select { background: transparent; width: 292px; padding: 10px 20px; font-size: 22px; border: 1px solid #ccc; } .SelArrBg select option { color: #000; padding: 0 10px; } .SelArrBg { width: 272px; border: 1px solid #636363; overflow: hidden; background: url(https://tutorialdeep.com/images/down-arrow.png) 240px 4px no-repeat #ddd; background-size: 22px; } </style> </head> <body> <strong>Default dropdown</strong><br><br> <select> <option>Select Your Option</option> <option value="India">India</option> <option value="US">US</option> <option value="UK">UK</option> <option value="Canada">Canada</option> <option value="Germany">Germany</option> </select><br><br> <strong>Dropdown after styling</strong><br><br> <div class="SelArrBg"> <select> <option>Select Your Option</option> <option value="India">India</option> <option value="US">US</option> <option value="UK">UK</option> <option value="Canada">Canada</option> <option value="Germany">Germany</option> </select> </div> </body> </html>
Go to
Tutorialdeep Homepage