How to style a <select> dropdown with CSS only without JavaScript?
Is there a CSS-only way to style a <select> dropdown?
I need to style a <select> form as much as humanly possible, without any JavaScript. What are the properties I can use to do so in CSS?
This code needs to be compatible with all major browsers:
I know I can make it with JavaScript: Example.
And I'm not talking about simple styling. I want to know, what the best we can do with CSS only.
I found similar questions on Stack Overflow.
And this one on Doctype.com.
Here are 3 solutions:
Solution #1 - appearance: none - with ie10-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 arrow */
}
Browser Support:
appearance: none has very good browser support (caniuse) - except for ie11- and firefox 34-
We can improve this technique and add support for ie10 and ie11 by adding
select::-ms-expand {
display: none; /* hide the default arrow in ie10 and ie11 */
}
If ie9 is a concern - we have no way of removing the default arrow (which would mean that we would now have two arrows), but, we could use a funky ie9 selector to at least undo our custom arrow - leaving the default select arrow intact.
/* target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0 ) {
select {
background-image:none9;
padding: 5px9;
}
}
All together:
select {
margin: 50px;
width: 150px;
padding: 5px 35px 5px 5px;
font-size: 16px;
border: 1px solid #ccc;
height: 34px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url(http://www.stackoverflow.com/favicon.ico) 96% / 15% no-repeat #eee;
}
/* CAUTION: IE hackery ahead */
select::-ms-expand {
display: none; /* remove default arrow in IE 10 and 11 */
}
/* target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0 ) {
select {
background:none9;
padding: 5px9;
}
}<select>
<option>Apples</option>
<option selected>Pineapples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>It is possible, but unfortunately mostly in Webkit-based browsers to the extent we, as developers, require. Here is the example of CSS styling gathered from Chrome options panel via built-in developer tools inspector, improved to match currently supported CSS properties in most modern browsers:
select {
-webkit-appearance: button;
-moz-appearance: button;
-webkit-user-select: none;
-moz-user-select: none;
-webkit-padding-end: 20px;
-moz-padding-end: 20px;
-webkit-padding-start: 2px;
-moz-padding-start: 2px;
background-color: #F07575; /* fallback color if gradients are not supported */
background-image: url(../images/select-arrow.png), -webkit-linear-gradient(top, #E5E5E5, #F4F4F4); /* For Chrome and Safari */
background-image: url(../images/select-arrow.png), -moz-linear-gradient(top, #E5E5E5, #F4F4F4); /* For old Fx (3.6 to 15) */
background-image: url(../images/select-arrow.png), -ms-linear-gradient(top, #E5E5E5, #F4F4F4); /* For pre-releases of IE 10*/
background-image: url(../images/select-arrow.png), -o-linear-gradient(top, #E5E5E5, #F4F4F4); /* For old Opera (11.1 to 12.0) */
background-image: url(../images/select-arrow.png), linear-gradient(to bottom, #E5E5E5, #F4F4F4); /* Standard syntax; must be last */
background-position: center right;
background-repeat: no-repeat;
border: 1px solid #AAA;
border-radius: 2px;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
color: #555;
font-size: inherit;
margin: 0;
overflow: hidden;
padding-top: 2px;
padding-bottom: 2px;
text-overflow: ellipsis;
white-space: nowrap;
}
When you run this code on any page within a Webkit-based browser it should change the appearance of the select box, remove standard OS-arrow and add a PNG-arrow, put some spacing before and after the label, almost anything you want.
The most important part is appearance property, which changes how the element behaves.
It works perfectly in almost all Webkit-based browser, including mobile ones, though Gecko doesn't support appearance as well as Webkit, it seems.
The select element and its dropdown feature are difficult to style.
style attributes for select element by Chris Heilmann confirms what Ryan Dohery said in a comment to the first answer:
"The select element is part of the operating system, not the browser chrome. Therefore, it is very unreliable to style, and it does not necessarily make sense to try anyway."
链接地址: http://www.djcxy.com/p/1098.html