How to Style Select Option Dropdown with only CSS
In this tutorial, we are going to see how to style select option dropdown with CSS. If you try to style the select tag directly using CSS properties like “background” or “border”, it won’t work, as most form elements are native to browsers and don’t support so many visual styles. So we need to find another way to style the select tag.
So how to customize the select tag with CSS. Just copy/paste the following HTML/CSS code:
HTML Code:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Style Select Option Dropdown with CSS</title> </head> <body> <div class="select-style"> <select> <option value="javascript">JavaScript</option> <option value="html">HTML</option> <option value="css">CSS</option> <option value="php">PHP</option> </select> </div> </body> </html>
CSS Code:
.select-style { padding: 0; margin: 0; border: 1px solid #ccc; width: 120px; border-radius: 3px; overflow: hidden; background-color: #fff; background: #fff; position: relative; } .select-style select { padding: 5px 8px; width: 130%; border: none; box-shadow: none; background-color: transparent; background-image: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .select-style:after { top: 50%; left: 85%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(0, 0, 0, 0); border-top-color: #000000; border-width: 5px; margin-top: -2px; z-index: 100; } .select-style select:focus { outline: none; }
Result |
---|
|