Form: style select

This commit is contained in:
Simon Lehericey 2017-07-25 14:33:03 +02:00 committed by Mathieu Magnin
parent 9c2e71afa3
commit e0bd42032a
2 changed files with 24 additions and 0 deletions

View file

@ -0,0 +1 @@
<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1683 808l-742 741q-19 19-45 19t-45-19L109 808q-19-19-19-45.5t19-45.5l166-165q19-19 45-19t45 19l531 531 531-531q19-19 45-19t45 19l166 165q19 19 19 45.5t-19 45.5z"/></svg>

After

Width:  |  Height:  |  Size: 270 B

View file

@ -58,6 +58,29 @@
max-width: 180px;
}
select {
// hack found here: https://stackoverflow.com/questions/1895476/how-to-style-a-select-dropdown-with-css-only-without-javascript
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: image-url("icons/chevron-down.svg") no-repeat;
background-size: 14px;
background-position: right 10px center;
padding-right: 3 * $default-spacer;
// CAUTION: IE hackery ahead
&::-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\0) {
select {
background: none\9;
}
}
}
.datetime {
input[type=date] {
display: inline-block;