form--select.pcss.css

Same filename in other branches
  1. 9 core/themes/claro/css/components/form--select.pcss.css
  2. 8.9.x core/themes/claro/css/components/form--select.pcss.css
  3. 11.x core/themes/claro/css/components/form--select.pcss.css

Select input elements.

File

core/themes/claro/css/components/form--select.pcss.css

View source
  1. /**
  2. * @file
  3. * Select input elements.
  4. */
  5. .form-element--type-select {
  6. padding-inline-end: calc(2rem - var(--input-border-size));
  7. background-image: url(../../images/icons/545560/chevron-down.svg);
  8. background-repeat: no-repeat;
  9. background-position: 100% 50%;
  10. background-size: 2.75rem 0.5625rem; /* w: 14px + (2 * 15px), h: 9px */
  11. /**
  12. * Select states.
  13. */
  14. &:focus {
  15. background-image: url(../../images/icons/003ecc/chevron-down.svg);
  16. }
  17. &[disabled] {
  18. background-image: url(../../images/icons/8e929c/chevron-down.svg);
  19. }
  20. @nest [dir="rtl"]
  21. @nest .no-touchevents
  22. }
  23. }
  24. @media (forced-colors: active) {
  25. .form-element--type-select,
  26. .form-element--type-select:focus,
  27. .form-element--type-select[disabled] {
  28. padding-inline-end: var(--input-padding-horizontal);
  29. background-image: none;
  30. appearance: revert; /* Revert appearance value for modern browsers. */
  31. }
  32. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.