= Styling Form Controls Using Pseudo Classes = WebKit provides a way to give CSS styles to form controls. Some form controls can be styled through pseudo classes. This article will illustrate how we can customize their appearances using the pseudo classes. Note: These pseudo classes are not standardized and we might change the behavior in the future. == == By giving "{{{-webkit-appearance: none;}}}", {{{}}} element creates two internal elements for its rendering. Since each internal element has a pseudo class, you can customize the appearance by changing the style of these pseudo classes. {{{
::-webkit-progress-bar ┗
::-webkit-progress-value }}} The default appearance is defined in http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css . Note that the width value of {{{-webkit-progress-value}}} is overwritten internally by WebKit based on the {{{value}}} atribute. You can find [http://trac.webkit.org/browser/trunk/LayoutTests/fast/dom/HTMLProgressElement/progress-bar-value-pseudo-element.html an example] of {{{}}} appearance customization in the WebKit test suite. [[Image(source:trunk/LayoutTests/platform/mac/fast/dom/HTMLProgressElement/progress-bar-value-pseudo-element-expected.png, 25%)]] == == As {{{}}}, {{{}}} also creates internal elements for rendering when "{{{-webkit-appearance: none;}}}" is given. Internal elements hierarchy is almost same as {{{}}} {{{
::-webkit-progress-bar ┗
::-webkit-meter-optimum-value, ::-webkit-meter-suboptimum-value, ::-webkit-meter-even-less-good-value }}} Note that the pseudo class of the second element dynamically changes based on element's {{{value}}} attribute. The width value of {{{-webkit-progress-value}}} is overwritten internally as {{{}}}. [http://trac.webkit.org/browser/trunk/LayoutTests/fast/dom/HTMLMeterElement/meter-styles.html An example] is also available for {{{}}} customization in the test suite. [[Image(source:trunk/LayoutTests/platform/mac/fast/dom/HTMLMeterElement/meter-styles-expected.png, 25%)]] === variations === On Mac OS X, WebKit provides multiple built-in appearances for {{{}}}. * {{{-webkit-appearance: continuous-capacity-level-indicator;}}} (Default) * {{{-webkit-appearance: discrete-capacity-level-indicator;}}} * {{{-webkit-appearance: relevancy-level-indicator;}}} * {{{-webkit-appearance: rating-level-indicator;}}} You can find the rendering result in the test suite: [[Image(source:trunk/LayoutTests/platform/mac/fast/dom/HTMLMeterElement/meter-appearances-capacity-expected.png, 25%)]] [[Image(source:trunk/LayoutTests/platform/mac/fast/dom/HTMLMeterElement/meter-appearances-rating-relevancy-expected.png, 25%)]] == element == TODO. == Form validation message == === WebKit r82179 or older (Chrome 10 and 11) === A validation message consists of four div elements with pseudo classes and some nodes for message text. You can customize the appearance by changing the style of these pseudo classes. {{{
::-webkit-validation-bubble ┣
::-webkit-validation-bubble-top-outer-arrow ┣
::-webkit-validation-bubble-top-inner-arrow ┗
::-webkit-validation-bubble-message ┣ ┃ ┗ Text node for the validation message ┗ Text nodes and
elements for the title attribute value }}} ==== Example ==== Suppose that you want to modify colors of the validation messages bubble. Add the following CSS declarations: {{{ ::-webkit-validation-bubble-message { color: ; background: none; background-color: ; border-color: ; } ::-webkit-validation-bubble-top-outer-arrow { border-bottom-color: ; } ::-webkit-validation-bubble-top-inner-arrow { border-bottom-color: ; } }}} The default appearance is defined around http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css?rev=81155#L588 . === WebKit r82180 or later === A validation message consists of four div elements with pseudo classes and some nodes for message text. You can customize the appearance by changing the style of these pseudo classes. {{{
::-webkit-validation-bubble ┣
::-webkit-validation-bubble-arrow-clipper ┃ ┗
::-webkit-validation-bubble-arrow ┗
::-webkit-validation-bubble-message ┣ ┃ ┗ Text node for the validation message ┗ Text nodes and
elements for the title attribute value }}} ==== Example ==== Suppose that you want to modify colors of the validation messages bubble. Add the following CSS declarations: {{{ ::-webkit-validation-bubble-message { color: ; background: ; border-color: ; -webkit-box-shadow: 0 0 0 0; } ::-webkit-validation-bubble-arrow { background: ; border-color: ; -webkit-box-shadow: 0 0 0 0; } }}} The default appearance is defined around http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css?rev=82180#L588 .