Text Input
A text input is used to gather free-form text from a user.
Overview
Installation
npm install @patternfly/elementsUsage
Basic
View HTML Source
<label for="input-box">Input: </label>
<pf-text-input id="input-box" type="text" placeholder="Placeholder"></pf-text-input>
Slots
None
Attributes
left-truncated-
Trim text on left
- DOM Property
leftTruncated- Type
-
boolean - Default
-
false
validated-
Value to indicate if the input is modified to show that validation state. If set to success, input will be modified to indicate valid state. If set to warning, input will be modified to indicate warning state. Invalid inputs will display an error state
- DOM Property
validated- Type
-
'success' | 'warning' - Default
-
unknown
icon-
icon variant
- DOM Property
icon- Type
-
'calendar' | 'clock' | 'search' - Default
-
unknown
accessible-label-
Accessible label for the input when no
<label>element is provided.- DOM Property
accessibleLabel- Type
-
string - Default
-
unknown
custom-icon-url-
Custom icon url to set as the text input's background-image
- DOM Property
customIconUrl- Type
-
string - Default
-
unknown
custom-icon-dimensions-
Dimensions for the custom icon set as the text input's background-size
- DOM Property
customIconDimensions- Type
-
string - Default
-
unknown
plain-
- DOM Property
plain- Type
-
boolean - Default
-
false
type-
Type that the input accepts.
- DOM Property
type- Type
-
| 'text' | 'date' | 'datetime-local' | 'email' | 'month' | 'number' | 'password' | 'search' | 'tel' | 'time' | 'url' - Default
-
unknown
disabled-
Flag to show if the input is disabled.
- DOM Property
disabled- Type
-
boolean - Default
-
false
required-
Flag to show if the input is required.
- DOM Property
required- Type
-
boolean - Default
-
false
pattern-
Validation pattern, like
<input>- DOM Property
pattern- Type
-
string - Default
-
unknown
readonly-
Flag to show if the input is read only.
- DOM Property
readonly- Type
-
boolean - Default
-
false
helper-text-
Helper text is text below a form field that helps a user provide the right information, like "Enter a unique name".
- DOM Property
helperText- Type
-
string - Default
-
unknown
validate-on-
If set to 'blur', will validate when focus leaves the input
- DOM Property
validateOn- Type
-
'blur' - Default
-
unknown
error-text-
Displayed when validation fails
- DOM Property
errorText- Type
-
string - Default
-
unknown
placeholder-
Input placeholder.
- DOM Property
placeholder- Type
-
string - Default
-
unknown
value-
Value of the input.
- DOM Property
value- Type
-
string - Default
-
''
Methods
setCustomValidity(message: string)checkValidity()reportValidity()
Events
None
CSS Custom Properties
| CSS Property | Description | Default |
|---|---|---|
--pf-c-form-control--Color |
var(--pf-global--Color--100, #151515)
|
|
--pf-c-form-control--FontSize |
var(--pf-global--FontSize--md, 1rem)
|
|
--pf-c-form-control--LineHeight |
var(--pf-global--LineHeight--md, 1.5)
|
|
--pf-c-form-control--BorderWidth |
var(--pf-global--BorderWidth--sm, 1px)
|
|
--pf-c-form-control--BorderTopColor |
var(--pf-global--BorderColor--300, #f0f0f0)
|
|
--pf-c-form-control--BorderRightColor |
var(--pf-global--BorderColor--300, #f0f0f0)
|
|
--pf-c-form-control--BorderBottomColor |
var(--pf-global--BorderColor--200, #8a8d90)
|
|
--pf-c-form-control--BorderLeftColor |
var(--pf-global--BorderColor--300, #f0f0f0)
|
|
--pf-c-form-control--BorderRadius |
0
|
|
--pf-c-form-control--BackgroundColor |
var(--pf-global--BackgroundColor--100, #fff)
|
|
--pf-c-form-control--Width |
100
|
|
--pf-c-form-control--Height |
calc(var(--pf-c-form-control--FontSize) * var(--pf-c-form-control--LineHeight) + var(--pf-c-form-control--BorderWidth) * 2 + var(--pf-c-form-control--PaddingTop) + var(--pf-c-form-control--PaddingBottom))
|
|
--pf-c-form-control--inset--base |
var(--pf-global--spacer--sm, 0.5rem)
|
|
--pf-c-form-control--PaddingTop |
calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--sm, 1px))
|
|
--pf-c-form-control--PaddingBottom |
calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--sm, 1px))
|
|
--pf-c-form-control--PaddingRight |
var(--pf-c-form-control--inset--base)
|
|
--pf-c-form-control--PaddingLeft |
var(--pf-c-form-control--inset--base)
|
|
--pf-c-form-control--hover--BorderBottomColor |
var(--pf-global--primary-color--100, #06c)
|
|
--pf-c-form-control--focus--BorderBottomWidth |
var(--pf-global--BorderWidth--md, 2px)
|
|
--pf-c-form-control--focus--PaddingBottom |
calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--focus--BorderBottomWidth))
|
|
--pf-c-form-control--focus--BorderBottomColor |
var(--pf-global--primary-color--100, #06c)
|
|
--pf-c-form-control--m-expanded--BorderBottomWidth |
var(--pf-global--BorderWidth--md, 2px)
|
|
--pf-c-form-control--m-expanded--PaddingBottom |
calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--focus--BorderBottomWidth))
|
|
--pf-c-form-control--m-expanded--BorderBottomColor |
var(--pf-global--primary-color--100, #06c)
|
|
--pf-c-form-control--placeholder--Color |
var(--pf-global--Color--dark-200, #6a6e73)
|
|
--pf-c-form-control--placeholder--child--Color |
var(--pf-global--Color--100, #151515)
|
|
--pf-c-form-control--disabled--Color |
var(--pf-global--disabled-color--100, #6a6e73)
|
|
--pf-c-form-control--disabled--BackgroundColor |
var(--pf-global--disabled-color--300, #f0f0f0)
|
|
--pf-c-form-control--disabled--BorderColor |
transparent
|
|
--pf-c-form-control--readonly--BackgroundColor |
var(--pf-global--disabled-color--300, #f0f0f0)
|
|
--pf-c-form-control--readonly--hover--BorderBottomColor |
var(--pf-global--BorderColor--200, #8a8d90)
|
|
--pf-c-form-control--readonly--focus--PaddingBottom |
calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--sm, 1px))
|
|
--pf-c-form-control--readonly--focus--BorderBottomWidth |
var(--pf-global--BorderWidth--sm, 1px)
|
|
--pf-c-form-control--readonly--focus--BorderBottomColor |
var(--pf-global--BorderColor--200, #8a8d90)
|
|
--pf-c-form-control--readonly--m-plain--BackgroundColor |
transparent
|
|
--pf-c-form-control--readonly--m-plain--inset--base |
0
|
|
--pf-c-form-control--success--BorderBottomWidth |
var(--pf-global--BorderWidth--md, 2px)
|
|
--pf-c-form-control--success--PaddingBottom |
calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--success--BorderBottomWidth))
|
|
--pf-c-form-control--success--BorderBottomColor |
var(--pf-global--success-color--100, #3e8635)
|
|
--pf-c-form-control--success--PaddingRight |
var(--pf-global--spacer--xl, 2rem)
|
|
--pf-c-form-control--success--BackgroundPositionX |
calc(100 - var(--pf-c-form-control--PaddingLeft))
|
|
--pf-c-form-control--success--BackgroundPositionY |
center
|
|
--pf-c-form-control--success--BackgroundPosition |
var(--pf-c-form-control--success--BackgroundPositionX) var(--pf-c-form-control--success--BackgroundPositionY)
|
|
--pf-c-form-control--success--BackgroundSizeX |
var(--pf-c-form-control--FontSize)
|
|
--pf-c-form-control--success--BackgroundSizeY |
var(--pf-c-form-control--FontSize)
|
|
--pf-c-form-control--success--BackgroundSize |
var(--pf-c-form-control--success--BackgroundSizeX) var(--pf-c-form-control--success--BackgroundSizeY)
|
|
--pf-c-form-control--success--BackgroundUrl |
—
|
|
--pf-c-form-control--m-warning--BorderBottomWidth |
var(--pf-global--BorderWidth--md, 2px)
|
|
--pf-c-form-control--m-warning--PaddingBottom |
calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--m-warning--BorderBottomWidth))
|
|
--pf-c-form-control--m-warning--BorderBottomColor |
var(--pf-global--warning-color--100, #f0ab00)
|
|
--pf-c-form-control--m-warning--PaddingRight |
var(--pf-global--spacer--xl, 2rem)
|
|
--pf-c-form-control--m-warning--BackgroundPositionX |
calc(100 - calc(var(--pf-c-form-control--PaddingLeft) - 0.0625rem))
|
|
--pf-c-form-control--m-warning--BackgroundPositionY |
center
|
|
--pf-c-form-control--m-warning--BackgroundPosition |
var(--pf-c-form-control--m-warning--BackgroundPositionX) var(--pf-c-form-control--m-warning--BackgroundPositionY)
|
|
--pf-c-form-control--m-warning--BackgroundSizeX |
1.25rem
|
|
--pf-c-form-control--m-warning--BackgroundSizeY |
var(--pf-c-form-control--FontSize)
|
|
--pf-c-form-control--m-warning--BackgroundSize |
var(--pf-c-form-control--m-warning--BackgroundSizeX) var(--pf-c-form-control--m-warning--BackgroundSizeY)
|
|
--pf-c-form-control--m-warning--BackgroundUrl |
—
|
|
--pf-c-form-control--invalid--BorderBottomWidth |
var(--pf-global--BorderWidth--md, 2px)
|
|
--pf-c-form-control--invalid--PaddingBottom |
calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--invalid--BorderBottomWidth))
|
|
--pf-c-form-control--invalid--BorderBottomColor |
var(--pf-global--danger-color--100, #c9190b)
|
|
--pf-c-form-control--invalid--PaddingRight |
var(--pf-global--spacer--xl, 2rem)
|
|
--pf-c-form-control--invalid--BackgroundPositionX |
calc(100 - var(--pf-c-form-control--PaddingLeft))
|
|
--pf-c-form-control--invalid--BackgroundPositionY |
center
|
|
--pf-c-form-control--invalid--BackgroundPosition |
var(--pf-c-form-control--invalid--BackgroundPositionX) var(--pf-c-form-control--invalid--BackgroundPositionY)
|
|
--pf-c-form-control--invalid--BackgroundSizeX |
var(--pf-c-form-control--FontSize)
|
|
--pf-c-form-control--invalid--BackgroundSizeY |
var(--pf-c-form-control--FontSize)
|
|
--pf-c-form-control--invalid--BackgroundSize |
var(--pf-c-form-control--invalid--BackgroundSizeX) var(--pf-c-form-control--invalid--BackgroundSizeY)
|
|
--pf-c-form-control--invalid--BackgroundUrl |
—
|
|
--pf-c-form-control--invalid--exclamation--Background |
var(--pf-c-form-control--invalid--BackgroundUrl) var(--pf-c-form-control--invalid--BackgroundPosition) / var(--pf-c-form-control--invalid--BackgroundSize) no-repeat
|
|
--pf-c-form-control--invalid--Background |
var(--pf-c-form-control--BackgroundColor) var(--pf-c-form-control--invalid--exclamation--Background)
|
|
--pf-c-form-control--m-search--PaddingLeft |
var(--pf-global--spacer--xl, 2rem)
|
|
--pf-c-form-control--m-search--BackgroundPosition |
var(--pf-c-form-control--PaddingRight)
|
|
--pf-c-form-control--m-search--BackgroundSize |
var(--pf-c-form-control--FontSize) var(--pf-c-form-control--FontSize)
|
|
--pf-c-form-control--m-search--BackgroundUrl |
—
|
|
--pf-c-form-control--m-icon--PaddingRight |
calc(var(--pf-c-form-control--inset--base) + var(--pf-c-form-control--m-icon--BackgroundSizeX) + var(--pf-c-form-control--m-icon--icon--spacer))
|
|
--pf-c-form-control--m-icon--BackgroundUrl |
none
|
|
--pf-c-form-control--m-icon--BackgroundPositionX |
calc(100 - var(--pf-c-form-control--inset--base))
|
|
--pf-c-form-control--m-icon--BackgroundPositionY |
center
|
|
--pf-c-form-control--m-icon--BackgroundSizeX |
var(--pf-c-form-control--FontSize)
|
|
--pf-c-form-control--m-icon--BackgroundSizeY |
var(--pf-c-form-control--FontSize)
|
|
--pf-c-form-control--m-icon--icon--spacer |
var(--pf-global--spacer--sm, 0.5rem)
|
|
--pf-c-form-control--m-icon--icon--PaddingRight |
calc(var(--pf-c-form-control--inset--base) + var(--pf-c-form-control--invalid--BackgroundSizeX) + var(--pf-c-form-control--m-icon--icon--spacer) + var(--pf-c-form-control--m-icon--BackgroundSizeX) + var(--pf-c-form-control--m-icon--icon--spacer))
|
|
--pf-c-form-control--m-icon--icon--BackgroundPositionX |
calc(var(--pf-c-form-control--m-icon--BackgroundPositionX) - var(--pf-c-form-control--m-icon--icon--spacer) - var(--pf-c-form-control--invalid--BackgroundSizeX))
|
|
--pf-c-form-control--m-icon--invalid--BackgroundUrl |
var(--pf-c-form-control--invalid--BackgroundUrl), var(--pf-c-form-control--m-icon--BackgroundUrl)
|
|
--pf-c-form-control--m-icon--invalid--BackgroundPosition |
var(--pf-c-form-control--invalid--BackgroundPosition), var(--pf-c-form-control--m-icon--icon--BackgroundPositionX) var(--pf-c-form-control--m-icon--BackgroundPositionY)
|
|
--pf-c-form-control--m-icon--invalid--BackgroundSize |
var(--pf-c-form-control--invalid--BackgroundSize), var(--pf-c-form-control--m-icon--BackgroundSizeX) var(--pf-c-form-control--m-icon--BackgroundSizeY)
|
|
--pf-c-form-control--m-icon--success--BackgroundUrl |
var(--pf-c-form-control--success--BackgroundUrl), var(--pf-c-form-control--m-icon--BackgroundUrl)
|
|
--pf-c-form-control--m-icon--success--BackgroundPosition |
var(--pf-c-form-control--success--BackgroundPosition), var(--pf-c-form-control--m-icon--icon--BackgroundPositionX) var(--pf-c-form-control--m-icon--BackgroundPositionY)
|
|
--pf-c-form-control--m-icon--success--BackgroundSize |
var(--pf-c-form-control--success--BackgroundSize), var(--pf-c-form-control--m-icon--BackgroundSizeX) var(--pf-c-form-control--m-icon--BackgroundSizeY)
|
|
--pf-c-form-control--m-icon--m-warning--BackgroundUrl |
var(--pf-c-form-control--m-warning--BackgroundUrl), var(--pf-c-form-control--m-icon--BackgroundUrl)
|
|
--pf-c-form-control--m-icon--m-warning--BackgroundPosition |
var(--pf-c-form-control--m-warning--BackgroundPosition), var(--pf-c-form-control--m-icon--icon--BackgroundPositionX) var(--pf-c-form-control--m-icon--BackgroundPositionY)
|
|
--pf-c-form-control--m-icon--m-warning--BackgroundSize |
var(--pf-c-form-control--m-warning--BackgroundSize), var(--pf-c-form-control--m-icon--BackgroundSizeX) var(--pf-c-form-control--m-icon--BackgroundSizeY)
|
|
--pf-c-form-control--m-calendar--BackgroundUrl |
—
|
|
--pf-c-form-control--m-clock--BackgroundUrl |
—
|
|
--pf-c-form-control__select--PaddingRight |
calc(var(--pf-global--spacer--lg, 1.5rem) + var(--pf-c-form-control--BorderWidth) + var(--pf-c-form-control--BorderWidth))
|
|
--pf-c-form-control__select--PaddingLeft |
calc(var(--pf-global--spacer--sm, 0.5rem) - var(--pf-c-form-control--BorderWidth))
|
|
--pf-c-form-control__select--BackgroundUrl |
—
|
|
--pf-c-form-control__select--BackgroundSize |
.625em
|
|
--pf-c-form-control__select--BackgroundPositionX |
calc(100 - var(--pf-global--spacer--md, 1rem) + 1px)
|
|
--pf-c-form-control__select--BackgroundPositionY |
center
|
|
--pf-c-form-control__select--BackgroundPosition |
var(--pf-c-form-control__select--BackgroundPositionX) var(--pf-c-form-control__select--BackgroundPositionY)
|
|
--pf-c-form-control__select--success--PaddingRight |
var(--pf-global--spacer--3xl, 4rem)
|
|
--pf-c-form-control__select--success--BackgroundPosition |
calc(var(--pf-c-form-control__select--BackgroundPositionX) - var(--pf-global--spacer--lg, 1.5rem))
|
|
--pf-c-form-control__select--m-warning--PaddingRight |
var(--pf-global--spacer--3xl, 4rem)
|
|
--pf-c-form-control__select--m-warning--BackgroundPosition |
calc(var(--pf-c-form-control__select--BackgroundPositionX) - var(--pf-global--spacer--lg, 1.5rem) + 0.0625rem)
|
|
--pf-c-form-control__select--invalid--PaddingRight |
var(--pf-global--spacer--3xl, 4rem)
|
|
--pf-c-form-control__select--invalid--BackgroundPosition |
calc(var(--pf-c-form-control__select--BackgroundPositionX) - var(--pf-global--spacer--lg, 1.5rem))
|
|
--pf-c-form-control--textarea--Width |
var(--pf-c-form-control--Width)
|
|
--pf-c-form-control--textarea--Height |
auto
|
|
--pf-c-form-control--textarea--success--BackgroundPositionY |
var(--pf-c-form-control--PaddingLeft)
|
|
--pf-c-form-control--textarea--m-warning--BackgroundPositionY |
var(--pf-c-form-control--PaddingLeft)
|
|
--pf-c-form-control--textarea--invalid--BackgroundPositionY |
var(--pf-c-form-control--PaddingLeft)
|
|
--pf-c-form-control--m-icon-sprite--success--BackgroundUrl |
—
|
|
--pf-c-form-control--m-icon-sprite--m-warning--BackgroundUrl |
—
|
|
--pf-c-form-control--m-icon-sprite--invalid--BackgroundUrl |
—
|
|
--pf-c-form-control--m-icon-sprite__select--BackgroundUrl |
—
|
|
--pf-c-form-control--m-icon-sprite--m-search--BackgroundUrl |
—
|
|
--pf-c-form-control--m-icon-sprite--m-calendar--BackgroundUrl |
—
|
|
--pf-c-form-control--m-icon-sprite--m-clock--BackgroundUrl |
url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#clock)
|
|
--pf-c-form-control--m-icon-sprite__select--BackgroundSize |
var(--pf-c-form-control--FontSize)
|
|
--pf-c-form-control--m-icon-sprite__select--BackgroundPositionX |
calc(100 - var(--pf-global--spacer--md, 1rem) + 7px)
|
|
--pf-c-form-control--m-icon-sprite__select--success--BackgroundPosition |
calc(100 - var(--pf-global--spacer--md, 1rem) + 1px - var(--pf-global--spacer--lg, 1.5rem))
|
|
--pf-c-form-control--m-icon-sprite__select--m-warning--BackgroundPosition |
calc(100 - var(--pf-global--spacer--md, 1rem) - var(--pf-global--spacer--lg, 1.5rem) + 0.0625rem)
|
|
--pf-c-form-control--m-icon-sprite__select--invalid--BackgroundPosition |
calc(100 - var(--pf-global--spacer--md, 1rem) - var(--pf-global--spacer--lg, 1.5rem))
|
|
--pf-c-form-control__error-text--m-status--Color |
var(--pf-global--danger-color--100, #c9190b)
|
|
--pf-global--FontSize--md |
1rem
|
|
--pf-global--LineHeight--md |
1.5
|
|
--pf-global--BorderColor--300 |
#f0f0f0
|
|
--pf-global--BackgroundColor--100 |
#fff
|
|
--pf-c-form-control--focus--BorderBottomWidth |
—
|
|
--pf-global--primary-color--100 |
#06c
|
|
--pf-global--Color--dark-200 |
#6a6e73
|
|
--pf-global--Color--100 |
#151515
|
|
--pf-global--disabled-color--100 |
#6a6e73
|
|
--pf-global--disabled-color--300 |
#f0f0f0
|
|
--pf-global--BorderWidth--sm |
1px
|
|
--pf-global--BorderColor--200 |
#8a8d90
|
|
--pf-global--success-color--100 |
#3e8635
|
|
--pf-c-form-control--success--BackgroundPositionX |
—
|
|
--pf-c-form-control--success--BackgroundPositionY |
—
|
|
--pf-c-form-control--success--BackgroundSizeX |
—
|
|
--pf-c-form-control--success--BackgroundSizeY |
—
|
|
--pf-global--warning-color--100 |
#f0ab00
|
|
--pf-c-form-control--m-warning--BackgroundPositionX |
—
|
|
--pf-c-form-control--m-warning--BackgroundPositionY |
—
|
|
--pf-c-form-control--m-warning--BackgroundSizeX |
—
|
|
--pf-c-form-control--m-warning--BackgroundSizeY |
—
|
|
--pf-global--BorderWidth--md |
2px
|
|
--pf-global--spacer--form-element |
0.375rem
|
|
--pf-c-form-control--invalid--BackgroundPositionX |
—
|
|
--pf-c-form-control--invalid--BackgroundPositionY |
—
|
|
--pf-c-form-control--invalid--BackgroundSizeY |
—
|
|
--pf-c-form-control--invalid--exclamation--Background |
—
|
|
--pf-global--spacer--xl |
2rem
|
|
--pf-c-form-control--inset--base |
—
|
|
--pf-c-form-control--m-icon--icon--spacer |
—
|
|
--pf-c-form-control--invalid--BackgroundSizeX |
—
|
|
--pf-c-form-control--m-icon--icon--BackgroundPositionX |
—
|
|
--pf-global--spacer--sm |
0.5rem
|
|
--pf-c-form-control__select--BackgroundPositionY |
—
|
|
--pf-global--spacer--3xl |
4rem
|
|
--pf-c-form-control__select--BackgroundPositionX |
—
|
|
--pf-global--spacer--md |
1rem
|
|
--pf-global--spacer--lg |
1.5rem
|
|
--pf-global--danger-color--100 |
#c9190b
|
|
--pf-c-form-control--Color |
—
|
|
--pf-c-form-control--Width |
—
|
|
--pf-c-form-control--PaddingTop |
—
|
|
--pf-c-form-control--PaddingRight |
—
|
|
--pf-c-form-control--PaddingBottom |
—
|
|
--pf-c-form-control--PaddingLeft |
—
|
|
--pf-c-form-control--FontSize |
—
|
|
--pf-c-form-control--LineHeight |
—
|
|
--pf-c-form-control--BackgroundColor |
—
|
|
--pf-c-form-control--BorderWidth |
—
|
|
--pf-c-form-control--BorderTopColor |
—
|
|
--pf-c-form-control--BorderRightColor |
—
|
|
--pf-c-form-control--BorderBottomColor |
—
|
|
--pf-c-form-control--BorderLeftColor |
—
|
|
--pf-c-form-control--BorderRadius |
—
|
|
--pf-c-form-control--Height |
—
|
|
--pf-c-form-control--disabled--BackgroundColor |
—
|
|
--pf-c-form-control--disabled--Color |
—
|
|
--pf-c-form-control--disabled--BorderColor |
—
|
|
--pf-c-form-control--hover--BorderBottomColor |
—
|
|
--pf-c-form-control--placeholder--Color |
—
|
|
--pf-c-form-control__error-text--m-status--Color |
—
|
|
--pf-c-form-control--readonly--BackgroundColor |
—
|
|
--pf-c-form-control--readonly--m-plain--BackgroundColor |
—
|
|
--pf-c-form-control--readonly--m-plain--inset--base |
—
|
|
--pf-c-form-control--invalid--PaddingRight |
—
|
|
--pf-c-form-control--invalid--BorderBottomColor |
—
|
|
--pf-c-form-control--invalid--PaddingBottom |
—
|
|
--pf-c-form-control--invalid--BackgroundUrl |
—
|
|
--pf-c-form-control--invalid--BackgroundPosition |
—
|
|
--pf-c-form-control--invalid--BackgroundSize |
—
|
|
--pf-c-form-control--invalid--BorderBottomWidth |
—
|
|
--pf-c-form-control--m-icon--PaddingRight |
—
|
|
--pf-c-form-control--m-icon--BackgroundUrl |
—
|
|
--pf-c-form-control--m-icon--BackgroundPositionX |
—
|
|
--pf-c-form-control--m-icon--BackgroundPositionY |
—
|
|
--pf-c-form-control--m-icon--BackgroundSizeX |
—
|
|
--pf-c-form-control--m-icon--BackgroundSizeY |
—
|
|
--pf-c-form-control--m-calendar--BackgroundUrl |
—
|
|
--pf-c-form-control--m-clock--BackgroundUrl |
—
|
|
--pf-c-form-control--success--PaddingRight |
—
|
|
--pf-c-form-control--success--BorderBottomColor |
—
|
|
--pf-c-form-control--success--PaddingBottom |
—
|
|
--pf-c-form-control--success--BackgroundUrl |
—
|
|
--pf-c-form-control--success--BackgroundPosition |
—
|
|
--pf-c-form-control--success--BackgroundSize |
—
|
|
--pf-c-form-control--success--BorderBottomWidth |
—
|
|
--pf-c-form-control--m-warning--PaddingRight |
—
|
|
--pf-c-form-control--m-warning--BorderBottomColor |
—
|
|
--pf-c-form-control--m-warning--PaddingBottom |
—
|
|
--pf-c-form-control--m-warning--BackgroundUrl |
—
|
|
--pf-c-form-control--m-warning--BackgroundPosition |
—
|
|
--pf-c-form-control--m-warning--BackgroundSize |
—
|
|
--pf-c-form-control--m-warning--BorderBottomWidth |
—
|
CSS Shadow Parts
None
