You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
42 lines
1010 B
42 lines
1010 B
2 years ago
|
/**
|
||
|
|
* 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;
|
||
|
|
}
|