Skip to content

Commit d703d5d

Browse files
alexandersandbergjonathantneal
authored andcommitted
Separate styling of <select>
This will remove the arrow symbol from <select> elements using either the 'size' or the 'multiple' attribute, since these are expanded and using a scrollbar.
1 parent b1555b1 commit d703d5d

1 file changed

Lines changed: 9 additions & 1 deletion

File tree

forms.css

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,11 +22,19 @@ textarea {
2222
select {
2323
-moz-appearance: none;
2424
-webkit-appearance: none;
25-
background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E") no-repeat right center / 1em;
25+
background: no-repeat right center / 1em;
2626
border-radius: 0;
2727
padding-right: 1em;
2828
}
2929

30+
/**
31+
* Change the inconsistent appearance in all browsers (opinionated).
32+
*/
33+
34+
select:not([multiple]):not([size]) {
35+
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E");
36+
}
37+
3038
/**
3139
* Change the inconsistent appearance in IE (opinionated).
3240
*/

0 commit comments

Comments
 (0)