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

Shopify’s admin product component library

.Polaris-TextField_1spwi{ font-size:1.6rem; font-weight:400; line-height:2.4rem; border:none; text-transform:initial; letter-spacing:initial; position:relative; display:flex; align-items:center; color:var(--p-text); cursor:text; }

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

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

.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:var(--p-text); }

.Polaris-TextField--focus_383dj > .Polaris-TextField__Input_30ock, .Polaris-TextField__Input_30ock:focus{ outline:none; }

.Polaris-TextField--focus_383dj > .Polaris-TextField__Input_30ock ~ .Polaris-TextField__Backdrop_1x2i2::after, .Polaris-TextField__Input_30ock:focus ~ .Polaris-TextField__Backdrop_1x2i2::after{ box-shadow:0 0 0 0.2rem var(--p-focused); outline:0.1rem solid transparent; }

.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:var(--p-surface-critical-subdued); border-color:var(--p-border-critical); }

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

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

.Polaris-TextField--disabled_hcuh9{ color:var(--p-text-disabled); cursor:initial; }

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

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

.Polaris-TextField__Input_30ock{ font-size:1.6rem; font-weight:400; line-height:2.4rem; border:none; 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; appearance:none; caret-color:var(--p-text); color:var(--p-text); }

@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{ opacity:1; background:none; color:var(--p-text-disabled); -webkit-text-fill-color:var(--p-text-disabled); }

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

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

.Polaris-TextField__Input_30ock[type='number']{ -webkit-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); }

.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:relative; position:absolute; z-index:10; top:0; right:0; bottom:0; left:0; background-color:var(--p-surface); border:1px solid var(--p-border-subdued); border-top-color:var(--p-border-shadow); border-radius:var(--p-border-radius-base); pointer-events:none; }

.Polaris-TextField__Backdrop_1x2i2::after{ content:''; 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__Prefix_10fbz, .Polaris-TextField__Suffix_10fbu{ position:relative; z-index:20; flex:0 0 auto; color:var(--p-text-subdued); -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); 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{ position:relative; -webkit-appearance:none; appearance:none; margin:0; padding:0; background:none; border:none; font-size:inherit; line-height:inherit; color:inherit; cursor:pointer; z-index:20; margin:0 1.2rem 0 0.25em; }

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

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

.Polaris-TextField__ClearButton_b7wzn:focus:enabled::after{ box-shadow:0 0 0 0.2rem var(--p-focused); outline:0.1rem solid transparent; }

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

.Polaris-TextField__Spinner_mzr5w{ --p-text-field-spinner-offset-large:calc(var(--p-text-field-spinner-offset) + 0.1rem); z-index:20; margin:var(--p-text-field-spinner-offset-large); color:var(--p-icon); display:flex; align-self:stretch; flex-direction:column; width:2.2rem; 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; border:none; text-transform:initial; letter-spacing:initial; padding:0.5rem 1.2rem; 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{ --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); display:flex; flex:1 1; justify-content:center; align-items:center; -webkit-appearance:none; appearance:none; border:none; }

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

.Polaris-TextField__Segment_xdd2a:active{ background:var(--p-surface-neutral-pressed); }

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

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

.Polaris-TextField__Segment_xdd2a:not(:first-child){ margin-top:0; }

.Polaris-TextField--monospaced_2esgp{ font-family:ui-monospace, SFMono-Regular, SF Mono, Consolas, Liberation Mono, Menlo, monospace; }