forms.css 1010 B

1234567891011121314151617181920212223242526272829303132333435363738394041
  1. /**
  2. * 1. Change the inconsistent appearance in all browsers (opinionated).
  3. * 2. Add typography inheritance in all browsers (opinionated).
  4. */
  5. :where(button, input, select, textarea) {
  6. background-color: transparent; /* 1 */
  7. border: 1px solid WindowFrame; /* 1 */
  8. color: inherit; /* 1 */
  9. font: inherit; /* 2 */
  10. letter-spacing: inherit; /* 2 */
  11. padding: 0.25em 0.375em; /* 1 */
  12. }
  13. /**
  14. * Change the inconsistent appearance in all browsers (opinionated).
  15. */
  16. :where(select) {
  17. appearance: none;
  18. 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;
  19. border-radius: 0;
  20. padding-right: 1em;
  21. }
  22. /**
  23. * Don't show the arrow for multiple choice selects
  24. */
  25. :where(select[multiple]) {
  26. background-image: none;
  27. }
  28. /**
  29. * Remove the border and padding in all browsers (opinionated).
  30. */
  31. :where([type="color" i], [type="range" i]) {
  32. border-width: 0;
  33. padding: 0;
  34. }