How do I style a dropdown with only CSS?

Here are three solutions: Solution #1 – appearance: none – with Internet Explorer 10 – 11 workaround (Demo) — To hide the default arrow set appearance: none on the select element, then add your own custom arrow with background-image select { -webkit-appearance: none; -moz-appearance: none; appearance: none; /* Remove default arrow */ background-image: url(…); /* Add custom … Read more