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

Shopify’s product component library

.Polaris-TextField_1spwi{ font-size:1.6rem; font-weight:400; line-height:2.4rem; text-transform:initial; letter-spacing:initial; position:relative; display:flex; align-items:center; color:#637381; cursor:text; }

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

.Polaris-TextField_1spwi svg{ fill:#637381; }

.Polaris-TextField--multiline_1jgfe{ padding:0; flex-wrap:wrap; }

.Polaris-TextField--multiline_1jgfe > .Polaris-TextField__Input_30ock{ overflow:auto; padding-left:1.2rem; padding-right:1.2rem; resize:none; }

.Polaris-TextField--hasValue_1mx8d{ color:#637381; }

.Polaris-TextField--focus_383dj > .Polaris-TextField__Input_30ock, .Polaris-TextField__Input_30ock:focus{ outline:none; border:0.1rem solid transparent; }

.Polaris-TextField--focus_383dj > .Polaris-TextField__Input_30ock ~ .Polaris-TextField__Backdrop_1x2i2::after, .Polaris-TextField__Input_30ock:focus ~ .Polaris-TextField__Backdrop_1x2i2::after{ opacity:1; }

.Polaris-TextField--error_37uk1 .Polaris-TextField__Input_30ock::-webkit-input-placeholder{ color:#9c9798; }

.Polaris-TextField--error_37uk1 .Polaris-TextField__Input_30ock::placeholder{ color:#9c9798; }

.Polaris-TextField--error_37uk1 > .Polaris-TextField__Input_30ock ~ .Polaris-TextField__Backdrop_1x2i2{ background-color:#fbeae5; border-color:#bf0711; }

.Polaris-TextField--error_37uk1 > .Polaris-TextField__Input_30ock ~ .Polaris-TextField__Backdrop_1x2i2::after{ border-color:#bf0711; }

.Polaris-TextField--readOnly_vi6ia > .Polaris-TextField__Backdrop_1x2i2{ background-color:#f9fafb; }

.Polaris-TextField--disabled_hcuh9{ color:#919eab; cursor:initial; }

.Polaris-TextField--disabled_hcuh9 > .Polaris-TextField__Backdrop_1x2i2{ background-color:#f9fafb; box-shadow:none; }

.Polaris-TextField--disabled_hcuh9 svg{ fill:#919eab; }

.Polaris-TextField__Input_30ock{ font-size:1.6rem; font-weight:400; line-height:2.4rem; text-transform:initial; letter-spacing:initial; position:relative; z-index:20; display:block; flex:1 1; width:100%; min-width:0; min-height:3.6rem; margin:0; padding:0.5rem 1.2rem; background:none; border:0.1rem solid transparent; font-family:inherit; font-size:inherit; font-weight:inherit; -webkit-appearance:none; -moz-appearance:none; appearance:none; }

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

.Polaris-TextField__Prefix_10fbz + .Polaris-TextField__Input_30ock{ padding-left:0; }

.Polaris-TextField__Input_30ock:disabled{ background:none; border:0.1rem solid transparent; color:currentColor; opacity:1; -webkit-text-fill-color:currentColor; }

.Polaris-TextField__Input_30ock:invalid{ box-shadow:none; }

.Polaris-TextField__Input_30ock::-webkit-input-placeholder{ color:#919eab; }

.Polaris-TextField__Input_30ock::placeholder{ color:#919eab; }

.Polaris-TextField__Input_30ock[type='number']{ -webkit-appearance:textfield; -moz-appearance:textfield; appearance:textfield; }

.Polaris-TextField__Input_30ock[type='number']::-webkit-outer-spin-button, .Polaris-TextField__Input_30ock[type='number']::-webkit-inner-spin-button{ -webkit-appearance:none; appearance:none; margin:0; }

.Polaris-TextField__Input_30ock:-webkit-autofill{ border-radius:var(--p-border-radius-base, 3px); }

.Polaris-TextField__Input_30ock:-webkit-autofill ~ .Polaris-TextField__Backdrop_1x2i2, .Polaris-TextField__Input_30ock:-webkit-autofill:hover ~ .Polaris-TextField__Backdrop_1x2i2, .Polaris-TextField__Input_30ock:-webkit-autofill:focus ~ .Polaris-TextField__Backdrop_1x2i2{ box-shadow:0 0 0 0.1rem #dfe3e8; }

.Polaris-TextField__Input--hasClearButton_15k6h[type='search']::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; }

.Polaris-TextField__Input--suffixed_1tsyu{ padding-right:0; }

.Polaris-TextField__Input--alignRight_1d0yj{ text-align:right; }

.Polaris-TextField__Input--alignLeft_exwxn{ text-align:left; }

.Polaris-TextField__Input--alignCenter_7nhdy{ text-align:center; }

.Polaris-TextField__Backdrop_1x2i2{ position:absolute; z-index:10; top:0; right:0; bottom:0; left:0; background-color:white; border:0.1rem solid var(--p-border, #c4cdd5); border-radius:var(--p-border-radius-base, 3px); box-shadow:inset 0 1px 0 0 rgba(99, 115, 129, 0.05); pointer-events:none; }

.Polaris-TextField__Backdrop_1x2i2::after{ content:''; position:absolute; top:-0.2rem; right:-0.2rem; bottom:-0.2rem; left:-0.2rem; border:var(--p-override-none, 0.2rem solid #5c6ac4); border-radius:inherit; opacity:0; transition:opacity 200ms cubic-bezier(0.64, 0, 0.35, 1); pointer-events:none; }

.Polaris-TextField__Prefix_10fbz, .Polaris-TextField__Suffix_10fbu{ position:relative; z-index:20; flex:0 0 auto; color:currentColor; -webkit-user-select:none; user-select:none; }

.Polaris-TextField__Prefix_10fbz{ margin-left:1.2rem; margin-right:0.8rem; }

.Polaris-TextField__Suffix_10fbu{ margin-left:0.25em; margin-right:1.2rem; }

.Polaris-TextField__CharacterCount_163be{ color:var(--p-text-subdued, #637381); z-index:20; margin:0 1.2rem 0 0.25em; pointer-events:none; text-align:right; }

.Polaris-TextField__AlignFieldBottom_9rm8m{ align-self:flex-end; width:100%; padding-bottom:0.8rem; }

.Polaris-TextField__ClearButton_b7wzn{ -webkit-appearance:none; -moz-appearance:none; appearance:none; margin:0; padding:0; background:none; border:none; font-size:inherit; line-height:inherit; cursor:pointer; z-index:20; margin:0 1.2rem 0 0.25em; }

.Polaris-TextField__ClearButton_b7wzn:focus{ outline:none; }

.Polaris-TextField__ClearButton_b7wzn:hover:enabled svg, .Polaris-TextField__ClearButton_b7wzn:focus:enabled svg{ fill:#637381; }

.Polaris-TextField__ClearButton_b7wzn:hover:enabled img, .Polaris-TextField__ClearButton_b7wzn:focus:enabled img{ filter:brightness(0) saturate(100%) invert(45%) sepia(8%) saturate(825%) hue-rotate(166deg) brightness(95%) contrast(90%); }

.Polaris-TextField__ClearButton_b7wzn:disabled{ cursor:default; }

.Polaris-TextField__Spinner_mzr5w{ z-index:20; display:flex; align-self:stretch; flex-direction:column; width:2.2rem; margin:1px; color:#212b36; cursor:pointer; }

.Polaris-TextField__SpinnerIcon_185nu{ height:1.2rem; width:1.2rem; }

.Polaris-TextField__Resizer_mlqsu{ position:absolute; bottom:0; left:0; right:0; height:0; visibility:hidden; overflow:hidden; }

.Polaris-TextField__DummyInput_1u3lq{ font-size:1.6rem; font-weight:400; line-height:2.4rem; text-transform:initial; letter-spacing:initial; padding:0.5rem 1.2rem; border:0.1rem solid transparent; word-wrap:break-word; word-break:break-word; overflow-wrap:break-word; white-space:pre-wrap; }

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

.Polaris-TextField__Segment_xdd2a{ display:flex; flex:1 1; justify-content:center; align-items:center; -webkit-appearance:none; -moz-appearance:none; appearance:none; background:linear-gradient(to bottom, white, #f9fafb); border:none; border-left:0.1rem solid var(--p-border, #c4cdd5); transition:background 100ms cubic-bezier(0.64, 0, 0.35, 1), box-shadow 100ms cubic-bezier(0.64, 0, 0.35, 1); }

.Polaris-TextField__Segment_xdd2a:focus{ outline:none; }

.Polaris-TextField__Segment_xdd2a:active{ background:linear-gradient(to bottom, #f4f6f8, #f4f6f8); box-shadow:inset 0 1px 1px 0 rgba(99, 115, 129, 0.1), inset 0 1px 4px 0 rgba(99, 115, 129, 0.2); }

.Polaris-TextField__Segment_xdd2a:not(:first-child){ margin-top:-1px; border-top:0.1rem solid var(--p-border, #c4cdd5); }

.Polaris-TextField__Segment_xdd2a:first-child{ border-top-right-radius:3px; }

.Polaris-TextField__Segment_xdd2a:last-child{ border-bottom-right-radius:3px; }

.Polaris-TextField--newDesignLanguage_1rik8.Polaris-TextField_1spwi{ color:var(--p-text); }

.Polaris-TextField--newDesignLanguage_1rik8.Polaris-TextField_1spwi svg{ fill:var(--p-icon); }

.Polaris-TextField--newDesignLanguage_1rik8.Polaris-TextField_1spwi .Polaris-TextField--hasValue_1mx8d{ color:var(--p-text); }

.Polaris-TextField--newDesignLanguage_1rik8.Polaris-TextField_1spwi.Polaris-TextField--error_37uk1 > .Polaris-TextField__Input_30ock ~ .Polaris-TextField__Backdrop_1x2i2{ background-color:var(--p-surface-critical-subdued); border-color:var(--p-border-critical); }

.Polaris-TextField--newDesignLanguage_1rik8.Polaris-TextField_1spwi.Polaris-TextField--error_37uk1 > .Polaris-TextField__Input_30ock ~ .Polaris-TextField__Backdrop_1x2i2::after{ border-color:var(--p-focused); }

.Polaris-TextField--newDesignLanguage_1rik8.Polaris-TextField_1spwi.Polaris-TextField--readOnly_vi6ia > .Polaris-TextField__Backdrop_1x2i2{ background-color:var(--p-action-secondary-disabled); }

.Polaris-TextField--newDesignLanguage_1rik8.Polaris-TextField_1spwi.Polaris-TextField--disabled_hcuh9 .Polaris-TextField__Input_30ock{ color:var(--p-text-disabled); }

.Polaris-TextField--newDesignLanguage_1rik8.Polaris-TextField_1spwi.Polaris-TextField--disabled_hcuh9 > .Polaris-TextField__Backdrop_1x2i2{ background-color:var(--p-surface-disabled); border-top-color:var(--p-border-disabled); }

.Polaris-TextField--newDesignLanguage_1rik8.Polaris-TextField_1spwi.Polaris-TextField--disabled_hcuh9 svg{ fill:var(--p-icon-disabled); }

.Polaris-TextField--newDesignLanguage_1rik8.Polaris-TextField_1spwi .Polaris-TextField__Input_30ock{ caret-color:var(--p-text); color:var(--p-text); }

.Polaris-TextField--hasValue_1mx8d .Polaris-TextField--newDesignLanguage_1rik8.Polaris-TextField_1spwi .Polaris-TextField__Input_30ock{ color:var(--p-text); }

.Polaris-TextField--newDesignLanguage_1rik8.Polaris-TextField_1spwi .Polaris-TextField__Input_30ock::-webkit-input-placeholder{ color:var(--p-text-subdued); }

.Polaris-TextField--newDesignLanguage_1rik8.Polaris-TextField_1spwi .Polaris-TextField__Input_30ock::placeholder{ color:var(--p-text-subdued); }

.Polaris-TextField--newDesignLanguage_1rik8.Polaris-TextField_1spwi .Polaris-TextField__Input_30ock:focus ~ .Polaris-TextField__Backdrop_1x2i2::after{ box-shadow:0 0 0 0.2rem var(--p-focused); }

@media (-ms-high-contrast: active){ .Polaris-TextField--newDesignLanguage_1rik8.Polaris-TextField_1spwi .Polaris-TextField__Input_30ock:focus ~ .Polaris-TextField__Backdrop_1x2i2::after{ outline:1px solid windowText; } }

.Polaris-TextField--newDesignLanguage_1rik8.Polaris-TextField_1spwi .Polaris-TextField__Backdrop_1x2i2{ position:relative; background-color:var(--p-surface); position:absolute; border:1px solid var(--p-border-subdued); border-top-color:var(--p-border-shadow); box-shadow:none; }

.Polaris-TextField--newDesignLanguage_1rik8.Polaris-TextField_1spwi .Polaris-TextField__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-TextField--newDesignLanguage_1rik8.Polaris-TextField_1spwi .Polaris-TextField__Backdrop_1x2i2::after{ opacity:1; }

.Polaris-TextField--newDesignLanguage_1rik8.Polaris-TextField_1spwi .Polaris-TextField__Spinner_mzr5w{ --p-text-field-spinner-offset-large:calc(var(--p-text-field-spinner-offset) + 0.1rem); margin:var(--p-text-field-spinner-offset-large); color:var(--p-icon); }

.Polaris-TextField--newDesignLanguage_1rik8.Polaris-TextField_1spwi .Polaris-TextField__Segment_xdd2a{ --p-text-field-spinner-border-radius:calc(var(--p-border-radius-base) - var(--p-text-field-spinner-offset)); background:var(--p-surface-neutral); border-radius:var(--p-text-field-spinner-border-radius); border-left:var(--p-override-none); }

.Polaris-TextField--newDesignLanguage_1rik8.Polaris-TextField_1spwi .Polaris-TextField__Segment_xdd2a:hover{ background:var(--p-surface-neutral-hovered); }

.Polaris-TextField--newDesignLanguage_1rik8.Polaris-TextField_1spwi .Polaris-TextField__Segment_xdd2a:active{ background:var(--p-surface-neutral-pressed); box-shadow:none; }

.Polaris-TextField--newDesignLanguage_1rik8.Polaris-TextField_1spwi .Polaris-TextField__Segment_xdd2a:not(:first-child){ margin-top:none; border-top:none; }

.Polaris-TextField--newDesignLanguage_1rik8.Polaris-TextField_1spwi .Polaris-TextField__Segment_xdd2a:first-child{ border-top-right-radius:var(--p-text-field-spinner-border-radius) !important; margin-bottom:var(--p-text-field-spinner-offset); }

.Polaris-TextField--newDesignLanguage_1rik8.Polaris-TextField_1spwi .Polaris-TextField__Segment_xdd2a:last-child{ border-bottom-right-radius:var(--p-text-field-spinner-border-radius) !important; }