LESS
html {
box-sizing: border-box;
font-size: 1rem;
text-align: 1.5;
body {
font-family: sans-serif;
margin: 0;
padding: 0;
width: 100%;
}
}
.select {
height: 2.5rem;
margin: 10rem auto;
position: relative;
vertical-align: middle;
width: 25rem;
&::after {
border: solid blue;
border-width: 0 1px 1px 0;
content: "";
display: inline-block;
height: 8px;
margin-top: -7px;
padding: 0;
pointer-events: none;
position: absolute;
right: 15px;
top: 50%;
transform: rotate(45deg);
width: 8px;
}
&:focus-within::after {
margin-top: -2px;
transform: rotate(-135deg);
}
select {
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
tap-highlight-color: rgba(0, 0, 0, 0);
-moz-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
touch-callout: none;
-moz-touch-callout: none;
-webkit-touch-callout: none;
width: 100%;
height: 40px;
border-radius: 2px;
padding: 10px;
background-color: #ffffff;
border: solid 1px blue;
&:disabled {
background-color: #f5f5f5;
border: solid 1px #777777;
}
&:disabled:hover,
&:disabled:focus,
&:disabled:active {
background-color: #f5f5f5;
border: solid 1px #777777;
}
&:disabled:-webkit-autofill {
box-shadow: 0 0 0 1000px #777777 inset;
}
&::-ms-expand {
display: none;
}
}
}
