You are here

form--select.css in Drupal 10

Select input elements.

File

core/themes/claro/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-right: calc(2rem - var(--input-border-size));
  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. [dir="rtl"] .form-element--type-select {
  19. padding-right: calc(1rem - var(--input-border-size));
  20. padding-left: calc(2rem - var(--input-border-size));
  21. background-position: 0 50%
  22. }
  23. @media (forced-colors: active) {
  24. [dir="rtl"] .form-element--type-select {
  25. padding-left: var(--input-padding-horizontal)
  26. }
  27. }
  28. .no-touchevents .form-element--type-select.form-element--extrasmall,
  29. .no-touchevents .form-element--type-select[name$="][_weight]"] {
  30. padding-right: calc(1.5rem - var(--input-border-size));
  31. background-size: 1.75rem 0.4375rem; /* w: 14px + (2 * 7px), h: 7px */
  32. }
  33. [dir="rtl"].no-touchevents .form-element--type-select.form-element--extrasmall,
  34. [dir="rtl"].no-touchevents .form-element--type-select[name$="][_weight]"] {
  35. padding-right: calc(0.5rem - var(--input-border-size));
  36. padding-left: calc(1.5rem - var(--input-border-size));
  37. }
  38. .form-element--type-select::-ms-expand {
  39. display: none;
  40. }
  41. /**
  42. * Select states.
  43. */
  44. .form-element--type-select:focus {
  45. 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");
  46. }
  47. .form-element--type-select[disabled] {
  48. 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");
  49. }
  50. @media (forced-colors: active) {
  51. .form-element--type-select,
  52. .form-element--type-select:focus,
  53. .form-element--type-select[disabled] {
  54. padding-right: var(--input-padding-horizontal);
  55. background-image: none;
  56. -webkit-appearance: revert;
  57. appearance: revert; /* Revert