form--select.css
Same filename in other branches
Select input elements.
File
-
core/
themes/ claro/ css/ components/ form--select.css
View source
- /*
- * DO NOT EDIT THIS FILE.
- * See the following change record for more information,
- * https://www.drupal.org/node/3084859
- * @preserve
- */
-
- /**
- * @file
- * Select input elements.
- */
-
- .form-element--type-select {
- padding-right: calc(2rem - 1px);
- 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");
- background-repeat: no-repeat;
- background-position: 100% 50%;
- background-size: 2.75rem 0.5625rem; /* w: 14px + (2 * 15px), h: 9px */
- }
-
- [dir="rtl"] .form-element--type-select {
- padding-right: calc(1rem - 1px);
- padding-left: calc(2rem - 1px);
- background-position: 0 50%;
- }
-
- .no-touchevents .form-element--type-select.form-element--extrasmall,
- .no-touchevents .form-element--type-select[name$="][_weight]"] {
- padding-right: calc(1.5rem - 1px);
- background-size: 1.75rem 0.4375rem; /* w: 14px + (2 * 7px), h: 7px */
- }
-
- [dir="rtl"].no-touchevents .form-element--type-select.form-element--extrasmall,
- [dir="rtl"].no-touchevents .form-element--type-select[name$="][_weight]"] {
- padding-right: calc(0.5rem - 1px);
- padding-left: calc(1.5rem - 1px);
- }
-
- .form-element--type-select::-ms-expand {
- display: none;
- }
-
- /**
- * Select states.
- */
-
- .form-element--type-select:focus {
- 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");
- }
-
- .form-element--type-select[disabled] {
- 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");
- }
-
- /* Necessary to show chevron in forced colors mode in modern browsers. */
-
- @media (forced-colors: active) {
- .form-element--type-select,
- .form-element--type-select:focus,
- .form-element--type-select[disabled] {
- padding-right: calc(1rem - 1px);
- background-image: none;
- -webkit-appearance: listbox;
- appearance: listbox; /* Default appearance value for modern browsers. */
-
- /* Lets browser set appearance to whatever the browser's default is. */
- }
-
- @supports ((-webkit-appearance: revert) or (appearance: revert)) {
- .form-element--type-select,
- .form-element--type-select:focus,
- .form-element--type-select[disabled] {
- -webkit-appearance: revert;
- appearance: revert;
- }
- }
- }
-
- /* Necessary for Internet Explorer to show chevron. */
-
- @media screen and (-ms-high-contrast: active) {
- .form-element--type-select,
- .form-element--type-select:focus,
- .form-element--type-select[disabled] {
- padding-right: calc(1rem - 1px);
-
- /* Re-enable default chevron for Internet Explorer. */
- }
- .form-element--type-select::-ms-expand,
- .form-element--type-select:focus::-ms-expand,
- .form-element--type-select[disabled]::-ms-expand {
- display: block;
- }
- }
Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.