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

Shopify’s admin product component library

.Polaris-TextField_1spwi { font-size: 1rem; font-weight: 400; line-height: 1.5rem; 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: 0.875rem; } }

.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: 0.75rem; padding-right: 0.75rem; 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.125rem var(--p-focused); outline: 0.0625rem 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: 1rem; font-weight: 400; line-height: 1.5rem; 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: 2.25rem; margin: 0; padding: 0.3125rem 0.75rem; background: none; border: 0.0625rem 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: 0.875rem; } }

.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: 0.0625rem 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.125rem; right: -0.125rem; bottom: -0.125rem; left: -0.125rem; display: block; pointer-events: none; box-shadow: 0 0 0 -0.125rem var(--p-focused); transition: box-shadow 100ms var(--p-ease); border-radius: calc(var(--p-border-radius-base) + 0.0625rem); }

.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: 0.75rem; margin-right: 0.5rem; }

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

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

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

.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 0.75rem 0 0.25em; }

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

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

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

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

.Polaris-TextField__Hidden_riqid { visibility: hidden; }

.Polaris-TextField__Spinner_mzr5w { --p-text-field-spinner-offset-large: calc(var(--p-text-field-spinner-offset) + 0.0625rem); z-index: 20; margin: var(--p-text-field-spinner-offset-large); color: var(--p-icon); display: flex; align-self: stretch; flex-direction: column; width: 1.375rem; cursor: pointer; }

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

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

.Polaris-TextField__DummyInput_1u3lq { font-size: 1rem; font-weight: 400; line-height: 1.5rem; border: none; text-transform: initial; letter-spacing: initial; padding: 0.3125rem 0.75rem; 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: 0.875rem; } }

.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; }