form--select.css

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

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 - 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. [dir="rtl"] .form-element--type-select {
  19. padding-right: calc(1rem - 1px);
  20. padding-left: calc(2rem - 1px);
  21. background-position: 0 50%;
  22. }
  23. .no-touchevents .form-element--type-select.form-element--extrasmall,
  24. .no-touchevents .form-element--type-select[name$="][_weight]"] {
  25. padding-right: calc(1.5rem - 1px);
  26. background-size: 1.75rem 0.4375rem; /* w: 14px + (2 * 7px), h: 7px */
  27. }
  28. [dir="rtl"].no-touchevents .form-element--type-select.form-element--extrasmall,
  29. [dir="rtl"].no-touchevents .form-element--type-select[name$="][_weight]"] {
  30. padding-right: calc(0.5rem - 1px);
  31. padding-left: calc(1.5rem - 1px);
  32. }
  33. .form-element--type-select::-ms-expand {
  34. display: none;
  35. }
  36. /**
  37. * Select states.
  38. */
  39. .form-element--type-select:focus {
  40. 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");
  41. }
  42. .form-element--type-select[disabled] {
  43. 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");
  44. }
  45. /* Necessary to show chevron in forced colors mode in modern browsers. */
  46. @media (forced-colors: active) {
  47. .form-element--type-select,
  48. .form-element--type-select:focus,
  49. .form-element--type-select[disabled] {
  50. padding-right: calc(1rem - 1px);
  51. background-image: none;
  52. -webkit-appearance: listbox;
  53. appearance: listbox; /* Default appearance value for modern browsers. */
  54. /* Lets browser set appearance to whatever the browser's default is. */
  55. }
  56. @supports ((-webkit-appearance: revert) or (appearance: revert)) {
  57. .form-element--type-select,
  58. .form-element--type-select:focus,
  59. .form-element--type-select[disabled] {
  60. -webkit-appearance: revert;
  61. appearance: revert;
  62. }
  63. }
  64. }
  65. /* Necessary for Internet Explorer to show chevron. */
  66. @media screen and (-ms-high-contrast: active) {
  67. .form-element--type-select,
  68. .form-element--type-select:focus,
  69. .form-element--type-select[disabled] {
  70. padding-right: calc(1rem - 1px);
  71. /* Re-enable default chevron for Internet Explorer. */
  72. }
  73. .form-element--type-select::-ms-expand,
  74. .form-element--type-select:focus::-ms-expand,
  75. .form-element--type-select[disabled]::-ms-expand {
  76. display: block;
  77. }
  78. }

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