Skip to content

Instantly share code, notes, and snippets.

@JoostKiens

JoostKiens/customSelectArrow.css

Last active August 23, 2017 12:47
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save JoostKiens/df63a0266a218cf512a97a87996f4fd3 to your computer and use it in GitHub Desktop.
Save JoostKiens/df63a0266a218cf512a97a87996f4fd3 to your computer and use it in GitHub Desktop.
Download ZIP
Remove default browser select arrow, replace with background image
Raw
customSelectArrow.css
select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxNSAxMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgPHBhdGggZD0iTTEyLjUgMi41bC00LjkgNS01LjEtNSIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2U9IiMyMTFEMUUiIGZpbGw9Im5vbmUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPg0KPC9zdmc+');
background-position: calc(100% - 10px) center;
background-repeat: no-repeat;
padding-left: 10px;
padding-right: 20px; /* prevent text from going under background image */
text-overflow: ellipsis;
}
select::-ms-expand { display: none; }
@JoostKiens
Copy link
Author

FF, Chrome, Safari, IE11+

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