Change color and appearance of drop down arrow
CssDrop Down-MenuCss Problem Overview
I want to change the default appearance of the arrow of a dropdown list so that looks the same across browsers. Is there a way to override the default look and feel of the drop down arrow using CSS or otherwise ?
Css Solutions
Solution 1 - Css
You can acheive this with CSS but you are not techinically changing the arrow itself.
In this example I am actually hiding the default arrow and displaying my own arrow instead.
.styleSelect select {
background: transparent;
width: 168px;
padding: 5px;
font-size: 16px;
line-height: 1;
border: 0;
border-radius: 0;
height: 34px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color: #000;
}
.styleSelect {
width: 140px;
height: 34px;
overflow: hidden;
background: url("images/downArrow.png") no-repeat right #fff;
border: 2px solid #000;
}
<div class="styleSelect">
<select class="units">
<option value="Metres">Metres</option>
<option value="Feet">Feet</option>
<option value="Fathoms">Fathoms</option>
</select>
</div>
Solution 2 - Css
No, cross-browser form custimization is very hard if not impossible to get it right for all browsers. If you really care about the appearance of those widgets you should use a javascript implementation.
see http://www.456bereastreet.com/archive/200409/styling_form_controls/ and http://developer.yahoo.com/yui/examples/button/btn_example07.html
Solution 3 - Css
It can be done by:
select{
background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 100% 50%;
}
select{
background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 100% 50%;
-moz-appearance: none;
-webkit-appearance: none;
-webkit-border-radius: 0px;
appearance: none;
outline-width: 0;
padding: 10px 10px 10px 5px;
display: block;
width: 10em;
border: none;
font-size: 1rem;
border-bottom: 1px solid #757575;
}
<div class="styleSelect">
<select class="units">
<option value="Metres">Metres</option>
<option value="Feet">Feet</option>
<option value="Fathoms">Fathoms</option>
</select>
</div>
Solution 4 - Css
The <select>
element is generated by the application and styling is not part of the CSS/HTML spec.
You would have to fake it with your own DIV and overlay it on top of the existing one, or build your own control emulating the same functionality.
Solution 5 - Css
No, you can't do it by using an actual <select>
, but there are techniques that allow you to "replace" them with javascript solutions that look better.
Here's a good article on the topic: http://v2.easy-designs.net/articles/replaceSelect/"><select> Something New
Solution 6 - Css
Not easily done I am afraid. The problem is Css cannot replace the arrow in a select as this is rendered by the browser. But you can build a new control from div and input elements and Javascript to perform the same function as the select.
Try looking at some of the autocomplete plugins for Jquery for example.
Otherwise there is some info on the select element here:
http://www.devarticles.com/c/a/Web-Style-Sheets/Taming-the-Select/
Solution 7 - Css
We have used YUI, Chosen, and are currently using the jQuery Select2 plugin: https://select2.github.io/
It's pretty robust, the arrow is just the tip of the iceberg.
As soon as stylized selects becomes a requirement, I agree with the others, go with a plugin. Don't kill yourself reinventing the wheel.
Solution 8 - Css
Unless you plan on creating your own drop down list (and not using a standard library drop down list), you are stuck. The DDL control's look is going to be based upon the system you are running and/or the browser that is rendering the output.
Solution 9 - Css
Try changing the color of your "border-top" attribute to white