Select dropdown full CSS

HTML
<div class="select"> <select> <option>your choise</option> <option>001</option> <option>002</option> <option>003</option> <option>004</option> <option>005</option> </select> </div>
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; } } }
JAVASCRIPT
Expand for more options Login