@shopify/polaris/dist/esnext/components/Select/Select.css

Shopify’s product component library

.Polaris-Select_ss8pm{ position:relative; }

.Polaris-Select_ss8pm select::-ms-expand{ display:none; }

.Polaris-Select--disabled_hcuh9 .Polaris-Select__Content_xd1mk{ color:var(--p-text-disabled, #919eab); }

.Polaris-Select--disabled_hcuh9 .Polaris-Select__InlineLabel_16kzb{ color:inherit; }

.Polaris-Select--disabled_hcuh9 .Polaris-Select__Icon_yj27d{ opacity:var(--p-override-one, 0.4); }

.Polaris-Select--disabled_hcuh9 .Polaris-Select__Icon_yj27d svg{ fill:var(--p-icon-disabled, #637381); }

.Polaris-Select--disabled_hcuh9.Polaris-Select--newDesignLanguage_1rik8 .Polaris-Select__Backdrop_1x2i2{ border-color:var(--p-border-disabled); }

.Polaris-Select--disabled_hcuh9.Polaris-Select--newDesignLanguage_1rik8 .Polaris-Select__Backdrop_1x2i2::before{ background-color:var(--p-action-secondary-disabled); }

.Polaris-Select--disabled_hcuh9.Polaris-Select--newDesignLanguage_1rik8 .Polaris-Select__Backdrop_1x2i2:hover{ cursor:default; }

.Polaris-Select--placeholder_w9ga2.Polaris-Select--error_37uk1 .Polaris-Select__Input_30ock{ color:#9c9798; }

.Polaris-Select--placeholder_w9ga2.Polaris-Select--error_37uk1 .Polaris-Select__Input_30ock:-moz-focusring{ color:transparent; text-shadow:var(--p-override-none, 0 0 0 #212b36); }

.Polaris-Select__Content_xd1mk{ font-size:1.6rem; font-weight:400; line-height:2.4rem; text-transform:initial; letter-spacing:initial; position:relative; z-index:20; display:flex; align-items:center; width:100%; min-height:3.6rem; padding:0.5rem 0.8rem 0.5rem 1.2rem; }

@media (min-width: 40em){ .Polaris-Select__Content_xd1mk{ font-size:1.4rem; } }

.Polaris-Select__InlineLabel_16kzb{ color:var(--p-text-subdued, #637381); margin-right:0.4rem; white-space:nowrap; overflow:hidden; }

.Polaris-Select__SelectedOption_azu52{ flex:1 1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.Polaris-Select__Prefix_10fbz{ padding-right:0.8rem; }

.Polaris-Select__Icon_yj27d svg{ fill:var(--p-icon, #637381); }

.Polaris-Select__Input_30ock{ font-size:1.6rem; font-weight:400; line-height:2.4rem; text-transform:initial; letter-spacing:initial; position:absolute; text-rendering:auto; top:0; left:0; z-index:30; width:100%; height:100%; margin:0; opacity:0.001; -webkit-appearance:none; -moz-appearance:none; appearance:none; }

@media (min-width: 40em){ .Polaris-Select__Input_30ock{ font-size:1.4rem; } }

.Polaris-Select_ss8pm:not(.Polaris-Select--newDesignLanguage_1rik8) .Polaris-Select__Backdrop_1x2i2{ background-color:#c4cdd5; border:0.1rem solid transparent; box-shadow:0 0 0 1px transparent, 0 1px 0 0 rgba(22, 29, 37, 0.05); border-radius:3px; transition-property:box-shadow, background-color; transition-duration:200ms; transition-timing-function:cubic-bezier(0.64, 0, 0.35, 1); position:absolute; z-index:10; top:0; bottom:0; left:0; right:0; }

.Polaris-Select_ss8pm:not(.Polaris-Select--newDesignLanguage_1rik8) .Polaris-Select__Backdrop_1x2i2::after{ content:''; position:absolute; top:0; bottom:0; left:0; right:0; display:block; background:linear-gradient(to bottom, white, #f9fafb); border-radius:2px; }

@media (-ms-high-contrast: active){ .Polaris-Select_ss8pm:not(.Polaris-Select--newDesignLanguage_1rik8) .Polaris-Select__Backdrop_1x2i2{ background:transparent; border:2px solid buttonText; transition:none; color:rgba(223, 227, 232, 0.3); }
  .Polaris-Select_ss8pm:not(.Polaris-Select--newDesignLanguage_1rik8) .Polaris-Select__Backdrop_1x2i2::after{ top:-4px; right:-4px; bottom:-4px; left:-4px; background:none; border-radius:4px; } }

.Polaris-Select_ss8pm:not(.Polaris-Select--newDesignLanguage_1rik8).Polaris-Select--error_37uk1 .Polaris-Select__Backdrop_1x2i2{ background:#bf0711; box-shadow:0 0 0 1px transparent; }

.Polaris-Select_ss8pm:not(.Polaris-Select--newDesignLanguage_1rik8).Polaris-Select--error_37uk1 .Polaris-Select__Backdrop_1x2i2::after{ background:#fbeae5; }

.Polaris-Select_ss8pm:not(.Polaris-Select--newDesignLanguage_1rik8).Polaris-Select--error_37uk1 .Polaris-Select__Input_30ock:focus ~ .Polaris-Select__Backdrop_1x2i2{ background:#5c6ac4; box-shadow:0 0 0 1px #5c6ac4; }

.Polaris-Select_ss8pm:not(.Polaris-Select--newDesignLanguage_1rik8).Polaris-Select--error_37uk1 .Polaris-Select__Input_30ock:focus ~ .Polaris-Select__Backdrop_1x2i2::after{ background:#fbeae5; }

.Polaris-Select_ss8pm:not(.Polaris-Select--newDesignLanguage_1rik8).Polaris-Select--disabled_hcuh9 .Polaris-Select__Backdrop_1x2i2{ background:#dfe3e8; box-shadow:none; }

.Polaris-Select_ss8pm:not(.Polaris-Select--newDesignLanguage_1rik8).Polaris-Select--disabled_hcuh9 .Polaris-Select__Backdrop_1x2i2::after{ background:#f9fafb; }

@media (-ms-high-contrast: active){ .Polaris-Select_ss8pm:not(.Polaris-Select--newDesignLanguage_1rik8).Polaris-Select--disabled_hcuh9 .Polaris-Select__Backdrop_1x2i2{ color:grayText; } }

.Polaris-Select_ss8pm:not(.Polaris-Select--newDesignLanguage_1rik8) .Polaris-Select__Input_30ock:focus ~ .Polaris-Select__Backdrop_1x2i2{ background:#5c6ac4; box-shadow:0 0 0 1px #5c6ac4, 0 0 0 0 transparent; border-color:transparent; }

.Polaris-Select_ss8pm:not(.Polaris-Select--newDesignLanguage_1rik8) .Polaris-Select__Input_30ock:focus ~ .Polaris-Select__Backdrop_1x2i2::after{ background:white; }

@media (-ms-high-contrast: active){ .Polaris-Select_ss8pm:not(.Polaris-Select--newDesignLanguage_1rik8) .Polaris-Select__Input_30ock:focus ~ .Polaris-Select__Backdrop_1x2i2::after{ border:1px dashed buttonText; } }

.Polaris-Select--newDesignLanguage_1rik8 .Polaris-Select__Backdrop_1x2i2{ z-index:10; top:0; right:0; bottom:0; left:0; border:0.1rem solid var(--p-border-subdued); border-bottom-color:var(--p-border-shadow-subdued); border-radius:var(--p-border-radius-base); background-color:var(--p-surface); box-shadow:var(--p-button-drop-shadow); position:relative; position:absolute; }

.Polaris-Select--newDesignLanguage_1rik8 .Polaris-Select__Backdrop_1x2i2::after{ content:var(--p-non-null-content, none); position:absolute; z-index:1; top:-0.2rem; right:-0.2rem; bottom:-0.2rem; left:-0.2rem; display:block; pointer-events:none; box-shadow:0 0 0 -0.2rem var(--p-focused); transition:box-shadow 100ms var(--p-ease); border-radius:calc(var(--p-border-radius-base) + 0.1rem); }

.Polaris-Select--newDesignLanguage_1rik8.Polaris-Select--error_37uk1 .Polaris-Select__Backdrop_1x2i2{ border-color:var(--p-border-critical); background-color:var(--p-surface-critical); }

.Polaris-Select--newDesignLanguage_1rik8.Polaris-Select--error_37uk1 .Polaris-Select__Backdrop_1x2i2.Polaris-Select--hover_37sww, .Polaris-Select--newDesignLanguage_1rik8.Polaris-Select--error_37uk1 .Polaris-Select__Backdrop_1x2i2:hover{ border-color:var(--p-border-critical); }

.Polaris-Select--newDesignLanguage_1rik8.Polaris-Select--error_37uk1 .Polaris-Select__Input_30ock:focus ~ .Polaris-Select__Backdrop_1x2i2::after{ box-shadow:0 0 0 0.2rem var(--p-focused); }

@media (-ms-high-contrast: active){ .Polaris-Select--newDesignLanguage_1rik8.Polaris-Select--error_37uk1 .Polaris-Select__Input_30ock:focus ~ .Polaris-Select__Backdrop_1x2i2::after{ outline:1px solid windowText; } }

.Polaris-Select--newDesignLanguage_1rik8 .Polaris-Select__Input_30ock:focus ~ .Polaris-Select__Backdrop_1x2i2::after{ box-shadow:0 0 0 0.2rem var(--p-focused); }

@media (-ms-high-contrast: active){ .Polaris-Select--newDesignLanguage_1rik8 .Polaris-Select__Input_30ock:focus ~ .Polaris-Select__Backdrop_1x2i2::after{ outline:1px solid windowText; } }

@media (-ms-high-contrast: active){ .Polaris-Select__Content_xd1mk{ color:windowText; -ms-high-contrast-adjust:none; }
  .Polaris-Select__InlineLabel_16kzb{ color:inherit; }
  .Polaris-Select__InlineLabel_16kzb::after{ content:':'; }
  .Polaris-Select__SelectedOption_azu52{ color:inherit; }
  .Polaris-Select__Icon_yj27d svg{ fill:buttonText; }
  .Polaris-Select__Backdrop_1x2i2::after{ display:none; }
  .Polaris-Select__Input_30ock:focus ~ .Polaris-Select__Content_xd1mk{ color:highlightText; }
  .Polaris-Select__Input_30ock:focus ~ .Polaris-Select__Backdrop_1x2i2{ background-color:highlight; }
  .Polaris-Select--disabled_hcuh9 .Polaris-Select__Content_xd1mk{ color:grayText; }
  .Polaris-Select--disabled_hcuh9 .Polaris-Select__Icon_yj27d{ opacity:1; }
  .Polaris-Select--disabled_hcuh9 .Polaris-Select__Icon_yj27d svg{ fill:grayText; } }