HTML CSS examples for CSS Widget:Arrow
Adding a Down Arrow to Select Drop Down
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .dropdown select { background:transparent; width:298px; padding:3px; font-family:Arial, Helvetica, sans-serif; font-size:2.3em; font-weight:601; color:Chartreuse; line-height:2; border:0; border-radius:0; -webkit-appearance:none;<!-- w ww.j av a2 s . c o m--> -moz-appearance:none; text-indent:0.2px; text-overflow:''; position:relative; } .dropdown { width:298px; overflow:hidden; background:no-repeat right yellow; border-top:2px solid blue; -webkit-border-radius:5px 5px 5px 5px; -moz-border-radius:5px 5px 5px 5px; border-radius:5px 5px 5px 5px; -webkit-box-shadow:inset 0 3px 5px pink, 0 2px 3px rgba(0, 0, 0, 0.6); -moz-box-shadow:inset 0 3px 5px WhiteSmoke, 0 2px 3px rgba(0, 0, 0, 0.6); box-shadow:inset 0 3px 5px OrangeRed, 0 2px 3px rgba(0, 0, 0, 0.6); -moz-box-shadow:0px 9px 4px -10px grey; -webkit-box-shadow:0px 9px 4px -10px BlueViolet; box-shadow:0px 9px 4px -10px Chartreuse; } .dropdown { position:relative; } .dropdown:before { content:""; position:absolute; right:11px; top:9px; width:0; height:0; border-left:11px solid yellow; border-right:11px solid blue; border-top:11px solid pink; } .dropdown:after { content:""; position:absolute; right:11px; top:4px; width:0; height:0; border-left:11px solid WhiteSmoke; border-right:11px solid OrangeRed; border-top:11px solid grey; } </style> </head> <body> <div class="dropdown"> <select> <option>Option One </option> <option>Option Two </option> <option>Option Three </option> </select> </div> </body> </html>