Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> .mybox { position: relative; display: inline-block; } select { display: inline-block; height: 30px; width: 150px; outline: none; color: #74646e; border: 1px solid #ccc; border-radius: 5px; box-shadow: 1px 1px 2px #999; background: #eee; } /* Select arrow styling */ .mybox .myarrow { width: 23px; height: 28px; position: absolute; display: inline-block; top: 1px; right: 3px; background: url("/uploads/media/default/0001/02/f7b4d3d2ba3fe1d8518e6e63d7740e1e73921abf.png") right / 90% no-repeat #eee; pointer-events: none; } </style> </head> <body> <div class="mybox"> <span class="myarrow"></span> <select> <option>Coffee</option> <option>Tea</option> <option>Juice</option> <option selected>Cocktail</option> </select> </div> </body> </html>