Examples
Documentation
Accessibility
Attribute | Applied to | Outcome |
---|---|---|
id | .pf-c-form-control | Provides an id value that can be used with the for attribute on an associated <label> element to provide an accessible label for the form control element. |
aria-invalid="true" | .pf-c-form-control | Indicates that the form control is in the error state and applies error state styling. |
aria-label="descriptive text" | .pf-c-form-control | Provides an accessible label for assistive technology. |
aria-expanded="true" | .pf-c-form-control.pf-m-expanded | Indicates that clicking in the form control has toggled something else to be expanded. |
Usage
Class | Applied to | Outcome |
---|---|---|
.pf-c-form-control | <input> ,<textarea> , <select> | Initiates an input, textarea or select. For styling of checkboxes or radios see the check component. Required |
.pf-m-resize-vertical | textarea.pf-m-form-control | Modifies a textarea.pf-c-form-control element so it can only be resized vertically along the y-axis. |
.pf-m-resize-horizontal | textarea.pf-m-form-control | Modifies a textarea.pf-c-form-control element so it can only be resized horizontally along the x-axis. |
.pf-m-success | .pf-c-form-control | Modifies a form control for the success state. |
.pf-m-warning | .pf-c-form-control | Modifies a form control for the warning state. |
.pf-m-search | .pf-c-form-control | Modifies a form control for the search input. |
.pf-m-icon | input.pf-c-form-control | Modifies a form control text input to be able to specify a custom SVG background via --pf-c-form-control--m-icon--BackgroundUrl , and other optional vars for other background properties. |
.pf-m-calendar | .pf-c-form-control.pf-m-icon | Modifies a form control to support the calendar icon. |
.pf-m-clock | .pf-c-form-control.pf-m-icon | Modifies a form control to support the clock icon. |
.pf-m-expanded | input.pf-c-form-control | Modifies a form control for the expanded state. This is used when clicking in the text input toggles something open/closed. |
.pf-m-placeholder | select.pf-c-form-control | Modifies a form select for placeholder styles. This modifier is set programatically based on the chosen option. |
CSS variables
.pf-c-form-control | --pf-global--Color--100 | #151515 | |
.pf-c-form-control | --pf-global--Color--200 | #6a6e73 | |
.pf-c-form-control | --pf-global--BorderColor--100 | #d2d2d2 | |
.pf-c-form-control | --pf-global--primary-color--100 | #06c | |
.pf-c-form-control | --pf-global--link--Color | #06c | |
.pf-c-form-control | --pf-global--link--Color--hover | #004080 | |
.pf-c-form-control | --pf-global--BackgroundColor--100 | #fff | |
.pf-c-form-control | --pf-c-form-control--FontSize | 1rem | |
.pf-c-form-control | --pf-c-form-control--LineHeight | 1.5 | |
.pf-c-form-control | --pf-c-form-control--BorderWidth | 1px | |
.pf-c-form-control | --pf-c-form-control--BorderTopColor | #f0f0f0 | |
.pf-c-form-control | --pf-c-form-control--BorderRightColor | #f0f0f0 | |
.pf-c-form-control | --pf-c-form-control--BorderBottomColor | #8a8d90 | |
.pf-c-form-control | --pf-c-form-control--BorderLeftColor | #f0f0f0 | |
.pf-c-form-control | --pf-c-form-control--BorderRadius | 0 | |
.pf-c-form-control | --pf-c-form-control--BackgroundColor | #fff | |
.pf-c-form-control | --pf-c-form-control--Width | 100% | |
.pf-c-form-control | --pf-c-form-control--Height | calc(1rem * 1.5 + 1px * 2 + calc(0.375rem - 1px) + calc(0.375rem - 1px)) | |
.pf-c-form-control | --pf-c-form-control--inset--base | 0.5rem | |
.pf-c-form-control | --pf-c-form-control--PaddingTop | calc(0.375rem - 1px) | |
.pf-c-form-control | --pf-c-form-control--PaddingBottom | calc(0.375rem - 1px) | |
.pf-c-form-control | --pf-c-form-control--PaddingRight | 0.5rem | |
.pf-c-form-control | --pf-c-form-control--PaddingLeft | 0.5rem | |
.pf-c-form-control | --pf-c-form-control--hover--BorderBottomColor | #06c | |
.pf-c-form-control | --pf-c-form-control--focus--BorderBottomWidth | 2px | |
.pf-c-form-control | --pf-c-form-control--focus--PaddingBottom | calc(0.375rem - 2px) | |
.pf-c-form-control | --pf-c-form-control--focus--BorderBottomColor | #06c | |
.pf-c-form-control | --pf-c-form-control--m-expanded--BorderBottomWidth | 2px | |
.pf-c-form-control | --pf-c-form-control--m-expanded--PaddingBottom | calc(0.375rem - 2px) | |
.pf-c-form-control | --pf-c-form-control--m-expanded--BorderBottomColor | #06c | |
.pf-c-form-control | --pf-c-form-control--placeholder--Color | #6a6e73 | |
.pf-c-form-control | --pf-c-form-control--disabled--Color | #6a6e73 | |
.pf-c-form-control | --pf-c-form-control--disabled--BackgroundColor | #f0f0f0 | |
.pf-c-form-control | --pf-c-form-control--disabled--BorderColor | transparent | |
.pf-c-form-control | --pf-c-form-control--readonly--BackgroundColor | #f0f0f0 | |
.pf-c-form-control | --pf-c-form-control--readonly--hover--BorderBottomColor | #8a8d90 | |
.pf-c-form-control | --pf-c-form-control--readonly--focus--PaddingBottom | calc(0.375rem - 1px) | |
.pf-c-form-control | --pf-c-form-control--readonly--focus--BorderBottomWidth | 1px | |
.pf-c-form-control | --pf-c-form-control--readonly--focus--BorderBottomColor | #8a8d90 | |
.pf-c-form-control | --pf-c-form-control--success--BorderBottomWidth | 2px | |
.pf-c-form-control | --pf-c-form-control--success--PaddingBottom | calc(0.375rem - 2px) | |
.pf-c-form-control | --pf-c-form-control--success--BorderBottomColor | #3e8635 | |
.pf-c-form-control | --pf-c-form-control--success--PaddingRight | 2rem | |
.pf-c-form-control | --pf-c-form-control--success--BackgroundPositionX | calc(100% - 0.5rem) | |
.pf-c-form-control | --pf-c-form-control--success--BackgroundPositionY | center | |
.pf-c-form-control | --pf-c-form-control--success--BackgroundPosition | calc(100% - 0.5rem) center | |
.pf-c-form-control | --pf-c-form-control--success--BackgroundSizeX | 1rem | |
.pf-c-form-control | --pf-c-form-control--success--BackgroundSizeY | 1rem | |
.pf-c-form-control | --pf-c-form-control--success--BackgroundSize | 1rem 1rem | |
.pf-c-form-control | --pf-c-form-control--success--BackgroundUrl | url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%233e8635' d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z'/%3E%3C/svg%3E") | |
.pf-c-form-control | --pf-c-form-control--m-warning--BorderBottomWidth | 2px | |
.pf-c-form-control | --pf-c-form-control--m-warning--PaddingBottom | calc(0.375rem - 2px) | |
.pf-c-form-control | --pf-c-form-control--m-warning--BorderBottomColor | #f0ab00 | |
.pf-c-form-control | --pf-c-form-control--m-warning--PaddingRight | 2rem | |
.pf-c-form-control | --pf-c-form-control--m-warning--BackgroundPositionX | calc(100% - calc(0.5rem - 0.0625rem)) | |
.pf-c-form-control | --pf-c-form-control--m-warning--BackgroundPositionY | center | |
.pf-c-form-control | --pf-c-form-control--m-warning--BackgroundPosition | calc(100% - calc(0.5rem - 0.0625rem)) center | |
.pf-c-form-control | --pf-c-form-control--m-warning--BackgroundSizeX | 1.25rem | |
.pf-c-form-control | --pf-c-form-control--m-warning--BackgroundSizeY | 1rem | |
.pf-c-form-control | --pf-c-form-control--m-warning--BackgroundSize | 1.25rem 1rem | |
.pf-c-form-control | --pf-c-form-control--m-warning--BackgroundUrl | url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23f0ab00' d='M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E") | |
.pf-c-form-control | --pf-c-form-control--invalid--BorderBottomWidth | 2px | |
.pf-c-form-control | --pf-c-form-control--invalid--PaddingBottom | calc(0.375rem - 2px) | |
.pf-c-form-control | --pf-c-form-control--invalid--BorderBottomColor | #c9190b | |
.pf-c-form-control | --pf-c-form-control--invalid--PaddingRight | 2rem | |
.pf-c-form-control | --pf-c-form-control--invalid--BackgroundPositionX | calc(100% - 0.5rem) | |
.pf-c-form-control | --pf-c-form-control--invalid--BackgroundPositionY | center | |
.pf-c-form-control | --pf-c-form-control--invalid--BackgroundPosition | calc(100% - 0.5rem) center | |
.pf-c-form-control | --pf-c-form-control--invalid--BackgroundSizeX | 1rem | |
.pf-c-form-control | --pf-c-form-control--invalid--BackgroundSizeY | 1rem | |
.pf-c-form-control | --pf-c-form-control--invalid--BackgroundSize | 1rem 1rem | |
.pf-c-form-control | --pf-c-form-control--invalid--BackgroundUrl | url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23c9190b' d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E") | |
.pf-c-form-control | --pf-c-form-control--invalid--exclamation--Background | url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23c9190b' d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E") calc(100% - 0.5rem) center / 1rem 1rem no-repeat | |
.pf-c-form-control | --pf-c-form-control--invalid--Background | #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23c9190b' d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E") calc(100% - 0.5rem) center / 1rem 1rem no-repeat | |
.pf-c-form-control | --pf-c-form-control--m-search--PaddingLeft | 2rem | |
.pf-c-form-control | --pf-c-form-control--m-search--BackgroundPosition | 0.5rem | |
.pf-c-form-control | --pf-c-form-control--m-search--BackgroundSize | 1rem 1rem | |
.pf-c-form-control | --pf-c-form-control--m-search--BackgroundUrl | url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%236a6e73' d='M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z'/%3E%3C/svg%3E") | |
.pf-c-form-control | --pf-c-form-control--m-icon--PaddingRight | calc(0.5rem + 1rem + 0.5rem) | |
.pf-c-form-control | --pf-c-form-control--m-icon--BackgroundUrl | none | |
.pf-c-form-control | --pf-c-form-control--m-icon--BackgroundPositionX | calc(100% - 0.5rem) | |
.pf-c-form-control | --pf-c-form-control--m-icon--BackgroundPositionY | center | |
.pf-c-form-control | --pf-c-form-control--m-icon--BackgroundSizeX | 1rem | |
.pf-c-form-control | --pf-c-form-control--m-icon--BackgroundSizeY | 1rem | |
.pf-c-form-control | --pf-c-form-control--m-icon--icon--spacer | 0.5rem | |
.pf-c-form-control | --pf-c-form-control--m-icon--icon--PaddingRight | calc(0.5rem + 1rem + 0.5rem + 1rem + 0.5rem) | |
.pf-c-form-control | --pf-c-form-control--m-icon--icon--BackgroundPositionX | calc(calc(100% - 0.5rem) - 0.5rem - 1rem) | |
.pf-c-form-control | --pf-c-form-control--m-icon--invalid--BackgroundUrl | url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23c9190b' d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E"), none | |
.pf-c-form-control | --pf-c-form-control--m-icon--invalid--BackgroundPosition | calc(100% - 0.5rem) center, calc(calc(100% - 0.5rem) - 0.5rem - 1rem) center | |
.pf-c-form-control | --pf-c-form-control--m-icon--invalid--BackgroundSize | 1rem 1rem, 1rem 1rem | |
.pf-c-form-control | --pf-c-form-control--m-icon--success--BackgroundUrl | url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%233e8635' d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z'/%3E%3C/svg%3E"), none | |
.pf-c-form-control | --pf-c-form-control--m-icon--success--BackgroundPosition | calc(100% - 0.5rem) center, calc(calc(100% - 0.5rem) - 0.5rem - 1rem) center | |
.pf-c-form-control | --pf-c-form-control--m-icon--success--BackgroundSize | 1rem 1rem, 1rem 1rem | |
.pf-c-form-control | --pf-c-form-control--m-icon--m-warning--BackgroundUrl | url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23f0ab00' d='M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E"), none | |
.pf-c-form-control | --pf-c-form-control--m-icon--m-warning--BackgroundPosition | calc(100% - calc(0.5rem - 0.0625rem)) center, calc(calc(100% - 0.5rem) - 0.5rem - 1rem) center | |
.pf-c-form-control | --pf-c-form-control--m-icon--m-warning--BackgroundSize | 1.25rem 1rem, 1rem 1rem | |
.pf-c-form-control | --pf-c-form-control--m-calendar--BackgroundUrl | url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%236a6e73' d='M0 464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V192H0v272zm320-196c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM192 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM64 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zM400 64h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v48h448v-48c0-26.5-21.5-48-48-48z'/%3E%3C/svg%3E") | |
.pf-c-form-control | --pf-c-form-control--m-clock--BackgroundUrl | url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%236a6e73' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z'/%3E%3C/svg%3E") | |
.pf-c-form-control | --pf-c-form-control__select--PaddingRight | 1.5rem | |
.pf-c-form-control | --pf-c-form-control__select--BackgroundUrl | url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23urrentColor' d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'/%3E%3C/svg%3E") | |
.pf-c-form-control | --pf-c-form-control__select--BackgroundSize | .625em | |
.pf-c-form-control | --pf-c-form-control__select--BackgroundPositionX | calc(100% - 1rem + 1px) | |
.pf-c-form-control | --pf-c-form-control__select--BackgroundPositionY | center | |
.pf-c-form-control | --pf-c-form-control__select--BackgroundPosition | calc(100% - 1rem + 1px) center | |
.pf-c-form-control | --pf-c-form-control__select--success--PaddingRight | 4rem | |
.pf-c-form-control | --pf-c-form-control__select--success--BackgroundPosition | calc(calc(100% - 1rem + 1px) - 1.5rem) | |
.pf-c-form-control | --pf-c-form-control__select--m-warning--PaddingRight | 4rem | |
.pf-c-form-control | --pf-c-form-control__select--m-warning--BackgroundPosition | calc(calc(100% - 1rem + 1px) - 1.5rem + 0.0625rem) | |
.pf-c-form-control | --pf-c-form-control__select--invalid--PaddingRight | 4rem | |
.pf-c-form-control | --pf-c-form-control__select--invalid--BackgroundPosition | calc(calc(100% - 1rem + 1px) - 1.5rem) | |
.pf-c-form-control | --pf-c-form-control--textarea--Width | 100% | |
.pf-c-form-control | --pf-c-form-control--textarea--Height | auto | |
.pf-c-form-control | --pf-c-form-control--textarea--success--BackgroundPositionY | 0.5rem | |
.pf-c-form-control | --pf-c-form-control--textarea--m-warning--BackgroundPositionY | 0.5rem | |
.pf-c-form-control | --pf-c-form-control--textarea--invalid--BackgroundPositionY | 0.5rem | |
.pf-c-form-control[readonly]:not(.pf-m-success):not([aria-invalid="true"]):hover | --pf-c-form-control--BorderBottomColor | #8a8d90 | |
.pf-c-form-control[readonly]:not(.pf-m-success):not([aria-invalid="true"]):focus | --pf-c-form-control--focus--PaddingBottom | calc(0.375rem - 1px) | |
.pf-c-form-control[readonly]:not(.pf-m-success):not([aria-invalid="true"]):focus | --pf-c-form-control--focus--BorderBottomWidth | 1px | |
.pf-c-form-control[readonly]:not(.pf-m-success):not([aria-invalid="true"]):focus | --pf-c-form-control--focus--BorderBottomColor | #8a8d90 | |
.pf-c-form-control:hover | --pf-c-form-control--BorderBottomColor | #06c | |
.pf-c-form-control:focus | --pf-c-form-control--BorderBottomColor | #06c | |
.pf-c-form-control.pf-m-expanded | --pf-c-form-control--BorderBottomColor | #06c | |
.pf-c-form-control:disabled | --pf-c-form-control--Color | #6a6e73 | |
.pf-c-form-control:disabled | --pf-c-form-control--BackgroundColor | #f0f0f0 | |
.pf-c-form-control[aria-invalid="true"] | --pf-c-form-control--PaddingRight | 2rem | |
.pf-c-form-control[aria-invalid="true"] | --pf-c-form-control--BorderBottomColor | #c9190b | |
.pf-c-form-control[aria-invalid="true"].pf-m-icon | --pf-c-form-control--PaddingRight | calc(0.5rem + 1rem + 0.5rem + 1rem + 0.5rem) | |
.pf-c-form-control.pf-m-success | --pf-c-form-control--PaddingRight | 2rem | |
.pf-c-form-control.pf-m-success | --pf-c-form-control--BorderBottomColor | #3e8635 | |
.pf-c-form-control.pf-m-success.pf-m-icon | --pf-c-form-control--PaddingRight | calc(0.5rem + 1rem + 0.5rem + 1rem + 0.5rem) | |
.pf-c-form-control.pf-m-warning | --pf-c-form-control--PaddingRight | 2rem | |
.pf-c-form-control.pf-m-warning | --pf-c-form-control--BorderBottomColor | #f0ab00 | |
.pf-c-form-control.pf-m-warning.pf-m-icon | --pf-c-form-control--PaddingRight | calc(0.5rem + 1rem + 0.5rem + 1rem + 0.5rem) | |
.pf-c-form-control.pf-m-search | --pf-c-form-control--PaddingLeft | 2rem | |
.pf-c-form-control.pf-m-icon | --pf-c-form-control--PaddingRight | calc(0.5rem + 1rem + 0.5rem) | |
.pf-c-form-control.pf-m-icon.pf-m-calendar | --pf-c-form-control--m-icon--BackgroundUrl | url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%236a6e73' d='M0 464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V192H0v272zm320-196c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM192 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM64 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zM400 64h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v48h448v-48c0-26.5-21.5-48-48-48z'/%3E%3C/svg%3E") | |
.pf-c-form-control.pf-m-icon.pf-m-clock | --pf-c-form-control--m-icon--BackgroundUrl | url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%236a6e73' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z'/%3E%3C/svg%3E") | |
select.pf-c-form-control | --pf-c-form-control--PaddingRight | 1.5rem | |
select.pf-c-form-control[aria-invalid="true"] | --pf-c-form-control--PaddingRight | 4rem | |
select.pf-c-form-control[aria-invalid="true"] | --pf-c-form-control--invalid--BackgroundPosition | calc(calc(100% - 1rem + 1px) - 1.5rem) | |
select.pf-c-form-control.pf-m-success | --pf-c-form-control--PaddingRight | 4rem | |
select.pf-c-form-control.pf-m-success | --pf-c-form-control--success--BackgroundPosition | calc(calc(100% - 1rem + 1px) - 1.5rem) | |
select.pf-c-form-control.pf-m-warning | --pf-c-form-control--PaddingRight | 4rem | |
textarea.pf-c-form-control | --pf-c-form-control--success--BackgroundPositionY | 0.5rem | |
textarea.pf-c-form-control | --pf-c-form-control--invalid--BackgroundPositionY | 0.5rem | |
textarea.pf-c-form-control | --pf-c-form-control--m-warning--BackgroundPositionY | 0.5rem | |
View source on GitHub