/**

* 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) {

-webkit-appearance: none;

appearance: none;

background: url(/sitelet?url=https%3A%2F%2Fgithub.com%2Fcsstools%2Fsanitize.css%2Fblob%2Fmain%2F%26quot%3Bdata%3Aimage%2Fsvg%2Bxml%3Bcharset%3Dutf-8%2C%253Csvg%2520xmlns%3D%26%23039%3Bhttp%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%26%23039%3B%2520width%3D%26%23039%3B16%26%23039%3B%2520height%3D%26%23039%3B4%26%23039%3B%253E%253Cpath%2520d%3D%26%23039%3BM4%25200h6L7%25204%26%23039%3B%2F%253E%253C%2Fsvg%253E%26quot%3B) 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;

}