TheWizEd Posted March 5, 2017 Share Posted March 5, 2017 Is there a way to change the color of the dropdown arrow on the right of a select element? Link to comment Share on other sites More sharing options...
Ingolme Posted March 5, 2017 Share Posted March 5, 2017 No, it's not even consistent among different browsers. A technique I've done to customize the dropdown arrow is to set the appearance to "none" and then set a background image as the arrow. select { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 1px solid #CCC; border-radius: 4px; padding-right: 32px; background: url(arrow.png) right no-repeat; } There are other possible solutions. You could use the ::after pseudo-element to make a CSS triangle. Link to comment Share on other sites More sharing options...
dsonesuk Posted March 6, 2017 Share Posted March 6, 2017 I have done it with image for the whole select box and arrow, NOT the options, by hiding it with opacity: 0;background image behind it, with span covering the select text box area, the option are not affected by opacity applied to select element, when you click what you think is image, you are actually clicking the select element, this causes the options to show. When you make a selection, JavaScript/jquery is used to copy the option selected text to the span, which can be styled as you want. You can also get combined dropdown js, css, that will convert your ordinary plain dropdown to an unordered list, very much how it is used for a menu, you can then style it as you wish, the select element and options are hidden from view, but again are updated using js/jquery to the selection of options made. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now