form--select.css

Same filename in this branch
  1. main core/themes/claro/css/components/form--select.css
  2. main core/themes/admin/css/components/form--select.css
Same filename and directory in other branches
  1. 10 core/themes/claro/css/components/form--select.css
  2. 11.x core/themes/claro/css/components/form--select.css
  3. 9 core/themes/claro/css/components/form--select.css
  4. 8.9.x core/themes/claro/css/components/form--select.css
  5. 11.x core/themes/admin/css/components/form--select.css
  6. 11.x core/themes/default_admin/css/components/form--select.css

Select input elements.

File

core/themes/default_admin/css/components/form--select.css

View source
  1. /*
  2. * DO NOT EDIT THIS FILE.
  3. * See the following change record for more information,
  4. * https://www.drupal.org/node/3084859
  5. * @preserve
  6. */
  7. /**
  8. * @file
  9. * Select input elements.
  10. */
  11. .form-element--type-select {
  12. padding-inline-end: calc(var(--gin-spacing-xs) + var(--gin-spacing-xl) - 1px);
  13. background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3e%3cpath fill='none' stroke-width='1.5' d='M1 1l6 6 6-6' stroke='%23545560'/%3e%3c/svg%3e");
  14. background-repeat: no-repeat;
  15. background-position: 100% 50%;
  16. background-size: 2.75rem 0.5625rem; /* w: 14px + (2 * 15px), h: 9px */
  17. /**
  18. * Select states.
  19. */
  20. &:focus {
  21. background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3e%3cpath fill='none' stroke-width='1.5' d='M1 1l6 6 6-6' stroke='%23003ecc'/%3e%3c/svg%3e");
  22. }
  23. &[disabled] {
  24. background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3e%3cpath fill='none' stroke-width='1.5' d='M1 1l6 6 6-6' stroke='%238e929c'/%3e%3c/svg%3e");
  25. }
  26. &:dir(rtl) {
  27. background-position: 0 50%;
  28. }
  29. .gin--dark-mode
  30. .no-touchevents
  31. }
  32. }
  33. @media (forced-colors: active) {
  34. .form-element--type-select,
  35. .form-element--type-select:focus,
  36. .form-element--type-select[disabled] {
  37. padding-inline-end: var(--input-padding-horizontal);
  38. background-image: none;
  39. appearance: revert; /* Revert appearance value for modern browsers. */
  40. }
  41. }
  42. .form-element--type-select--small {
  43. min-height: 2.25rem;
  44. background-position: 100% 52%;
  45. font-size: var(--gin-font-size-xs);
  46. line-height: 1.4;
  47. padding-block: 0.474rem;
  48. /* 0.79rem * 1.2 / 2 */
  49. &:dir(rtl) {
  50. background-position: 0% 52%;
  51. }
  52. }

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