/** * 1. Change the inconsistent appearance in all browsers (opinionated). * 2. Add typography inheritance in all browsers (opinionated). */ :where(button, input, select, textarea) { background-color: transparent; /* 1 */ border: 1px solid WindowFrame; /* 1 */ color: inherit; /* 1 */ font: inherit; /* 2 */ letter-spacing: inherit; /* 2 */ padding: 0.25em 0.375em; /* 1 */ } /** * Change the inconsistent appearance in all browsers (opinionated). */ :where(select) { appearance: none; background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E") no-repeat right center / 1em; border-radius: 0; padding-right: 1em; } /** * Don't show the arrow for multiple choice selects */ :where(select[multiple]) { background-image: none; } /** * Remove the border and padding in all browsers (opinionated). */ :where([type="color" i], [type="range" i]) { border-width: 0; padding: 0; }