Pure CSS Select Box Styling

<!doctype html> <html> <body> <div> <h1>Pure CSS Select Box Styling</h1> <p>Originally implemented on <a href="https://internationale-friedenspolitik.org/">internationale-friedenspolitik.org</a></p> <select class="custom-select"> <option>Choose something...</option> <option>Lachs-Carpaccio</option> <option>Pizza</option> </select> <p>Feel free to use this code.<br>If you have any suggestions, please leave a comment.</p> </div> </body> </html>
.custom-select { -webkit-appearance: none; -moz-appearance: none; appearance: none; height: 57px; padding: 10px 38px 10px 16px; background: #fff url("https://anselmurban.de/codepen-img/select-arrows.svg") no-repeat right 16px center; background-size: 10px; transition: border-color .1s ease-in-out,box-shadow .1s ease-in-out; border: 1px solid #ddd; border-radius: 3px; } .custom-select:hover { border: 1px solid #999; } .custom-select:focus { border: 1px solid #999; box-shadow: 0 3px 5px 0 rgba(0,0,0,.2); outline: none; } /* remove default arrow in IE */ select::-ms-expand { display:none; } /* DEMO STYLING */ html { height: 100%; font-size: 62.5%; } body { height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; font-family: 'Source Sans Pro', sans-serif; font-size: 1.8rem; color: #333; background: radial-gradient(ellipse at center, #f5f5f5 0%,#ddd 100%); } h1 { font-family: Merriweather, serif; } a { color: #333; font-weight: 700; text-decoration: none; } a:hover { text-decoration: underline; } .custom-select { font-family: 'Source Sans Pro', sans-serif; font-size: 1.6rem; }
// July 17 2016: Update: default cursor and border color (#999) when hovering over select box; changed background image URI
Expand for more options Login