Use custom dropdown icon on <select>

This commit is contained in:
djmaze 2021-02-19 14:40:13 +01:00
parent 158991ed55
commit bc64fe6d0d
3 changed files with 9 additions and 16 deletions

View file

@ -118,15 +118,12 @@ input[type="checkbox"] {
// Make select elements obey height by applying a border
select {
width: 223px; // default input width + 10px of padding that doesn't get applied
appearance: none;
background: @inputBackground url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='10px' width='15px'><text x='0' y='10' fill='rgb(85,85,85)'>▾</text></svg>") right center/1em no-repeat border-box;
border: 1px solid @inputBorder;
background-color: @inputBackground; // Chrome on Linux and Mobile Safari need background-color
}
// Make multiple select elements height not fixed
select[multiple],
select[size] {
height: auto;
cursor: pointer;
padding-right: 1.5em;
width: 223px; // default input width + 10px of padding that doesn't get applied
}
// Focus for select, file, radio, and checkbox