1234567891011121314151617181920212223242526272829303132333435363738394041 |
- /**
- * 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;
- }
|