// Remove the browser styling from a select box and create a simple dropdown. // See https://www.filamentgroup.com/lab/select-css.html .custom-select { display: inline-block; box-sizing: border-box; padding: 0.5rem 2rem 0.5rem .8rem; width: auto; font-size: 1em; line-height: 1.3; border: 1px solid $color__text-lighter; box-shadow: none; border-radius: 0.5em; -moz-appearance: none; -webkit-appearance: none; appearance: none; background-color: transparent; background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg width="14" height="8" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M2 0L7 5L12 0L14 1L7 8L0 1L2 0Z" fill="%23555D66"/%3E%3C/svg%3E%0A'); background-repeat: no-repeat; background-position: right .7em top 50%; background-size: .65em auto; &::-ms-expand { display: none; } &:focus { box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7); box-shadow: 0 0 0 3px -moz-mac-focusring; color: #222; outline: none; } & option { font-weight: normal; } }