Skip to content

Instantly share code, notes, and snippets.

@vladimirsiljkovic
Last active November 26, 2022 09:59
Show Gist options
  • Save vladimirsiljkovic/ef176cae54d3c4d1992907e1e0723210 to your computer and use it in GitHub Desktop.
Save vladimirsiljkovic/ef176cae54d3c4d1992907e1e0723210 to your computer and use it in GitHub Desktop.
Cross-browser (IE11+) <select> element styling without wrapper <div> https://jsbin.com/diqene/edit?html,css,output
select {
-webkit-appearance: none; /* Webkit */
-moz-appearance: none; /* FF */
-ms-appearance: none; /* Edge */
appearance: none; /* Future */
/* Optional styles */
padding: 0.3em 1.5em 0.3em 0.6em;
border: 1px solid currentColor;
background: white;
border-radius: 3px;
font-size: inherit;
background-repeat: no-repeat;
background-position: right 5px center;
background-size: 1em;
background-image: url("http://www.clipartbest.com/cliparts/ncB/75y/ncB75yaji.jpeg");
}
/* IE11 */
select::-ms-expand {
display: none;
}
<select>
<option value="Lorem">Lorem</option>
<option value="Lorem Ipsum">Lorem Ipsum</option>
</select>
@Rene-Torres
Copy link

Thanks for the IE fix.

@alexandr-kazakov
Copy link

Thank you for the ::-ms-expand trick

@Aphax
Copy link

Aphax commented Feb 9, 2021

Thank you that helped !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment