Form: style select
This commit is contained in:
parent
9c2e71afa3
commit
e0bd42032a
2 changed files with 24 additions and 0 deletions
1
app/assets/images/icons/chevron-down.svg
Normal file
1
app/assets/images/icons/chevron-down.svg
Normal 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 |
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue