Text Area
A text area component is used for entering a paragraph of text that is longer than one line.
Overview
Installation
npm install @patternfly/elementsUsage
Basic
View HTML Source
<label for="text">Text Area : </label>
<pf-text-area id="text"></pf-text-area>
With Placeholder
View HTML Source
<label for="text">Text Area : </label>
<pf-text-area id="text" placeholder="placeholder"></pf-text-area>
Required
View HTML Source
<label for="text">Text Area : </label>
<pf-text-area id="text" placeholder="placeholder" required="true" ></pf-text-area>
Disabled state
View HTML Source
<label for="text">Text Area : </label>
<pf-text-area id="text" placeholder="placeholder" disabled="true" ></pf-text-area>
Resize Vertical
View HTML Source
<label for="text">Text Area : </label>
<pf-text-area id="text" placeholder="placeholder" resize='vertical'></pf-text-area>
Resize Horizontal
View HTML Source
<label for="text">Text Area : </label>
<pf-text-area id="text" placeholder="placeholder" resize='horizontal'></pf-text-area>
Slots
None
Attributes
accessible-label-
Accessible label for the input when no
<label>element is provided.- DOM Property
accessibleLabel- Type
-
string - Default
-
unknown
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
disabled-
Flag to show if the input is disabled.
- DOM Property
disabled- Type
-
boolean - Default
-
false
required-
Flag to show if the text area is required.
- DOM Property
required- Type
-
boolean - Default
-
false
readonly-
Flag to show if the input is read only.
- DOM Property
readonly- Type
-
boolean - Default
-
false
placeholder-
Input placeholder.
- DOM Property
placeholder- Type
-
string - Default
-
unknown
value-
Value of the input.
- DOM Property
value- Type
-
string - Default
-
''
resize-
Sets the orientation to limit the resize to
- DOM Property
resize- Type
-
'horizontal' | 'vertical' | 'both' - Default
-
unknown
auto-resize-
Flag to modify height based on contents.
- DOM Property
autoResize- Type
-
boolean - Default
-
false
Methods
firstUpdated()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 |
—
|
|
--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-global--FontSize--md |
1rem
|
|
--pf-global--LineHeight--md |
1.5
|
|
--pf-global--BorderColor--300 |
#f0f0f0
|
|
--pf-global--BackgroundColor--100 |
#fff
|
|
--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-c-form-control--success--BorderBottomWidth |
—
|
|
--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-c-form-control--m-warning--BorderBottomWidth |
—
|
|
--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-global--danger-color--100 |
#c9190b
|
|
--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--BackgroundPositionX |
—
|
|
--pf-c-form-control--m-icon--icon--spacer |
—
|
|
--pf-c-form-control--invalid--BackgroundSizeX |
—
|
|
--pf-c-form-control--success--BackgroundUrl |
—
|
|
--pf-c-form-control--success--BackgroundPosition |
—
|
|
--pf-c-form-control--success--BackgroundSize |
—
|
|
--pf-c-form-control--m-warning--BackgroundUrl |
—
|
|
--pf-c-form-control--m-icon--BackgroundUrl |
—
|
|
--pf-c-form-control--m-warning--BackgroundPosition |
—
|
|
--pf-c-form-control--m-icon--icon--BackgroundPositionX |
—
|
|
--pf-c-form-control--m-icon--BackgroundPositionY |
—
|
|
--pf-c-form-control--m-warning--BackgroundSize |
—
|
|
--pf-c-form-control--m-icon--BackgroundSizeX |
—
|
|
--pf-c-form-control--m-icon--BackgroundSizeY |
—
|
|
--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-c-form-control--textarea--success--BackgroundPositionY |
—
|
|
--pf-c-form-control--textarea--invalid--BackgroundPositionY |
—
|
|
--pf-c-form-control--textarea--m-warning--BackgroundPositionY |
—
|
|
--pf-c-form-control--textarea--Width |
—
|
|
--pf-c-form-control--textarea--Height |
—
|
|
--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--placeholder--Color |
—
|
|
--pf-c-form-control--hover--BorderBottomColor |
—
|
|
--pf-c-form-control--focus--BorderBottomColor |
—
|
|
--pf-c-form-control--focus--PaddingBottom |
—
|
|
--pf-c-form-control--focus--BorderBottomWidth |
—
|
|
--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--disabled--BackgroundColor |
—
|
|
--pf-c-form-control--disabled--Color |
—
|
|
--pf-c-form-control--disabled--BorderColor |
—
|
|
--pf-c-form-control--readonly--BackgroundColor |
—
|
CSS Shadow Parts
None
