= 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. == == You can customize {{{}}} element by {{{-webkit-progress-bar-value}}} pseudo class. An example following: {{{ progress.custom { -webkit-appearance: none; background-color: blue; } progress.custom::-webkit-progress-bar-value { background-color: red; } }}} In this example, we first disable the default visual by {{{-webkit-appearance: none}}}, then give styles, one for {{{}}} element itself, another for its "bar" part. With this tyle, following HTML fragment... {{{ }}} ...looks like: [[Image(custom-progress.png, 25%)]] Of course, we can also set properties other than {{{background-color}}}. == == As {{{}}}, {{{}}} can be customized by pseudo classes. But it's more complicated because {{{}}} has three different 3 states ({{{optimal}}}, {{{suboptimal}}} and {{{even-less-good}}}) and 2 directions ({{{horizontal}}} and {{{vertical}}}). WebKit defines 8 pseudo classes to handle them: {{{ meter.custom::-webkit-meter-horizontal-bar { background: gray; } meter.custom::-webkit-meter-horizontal-optimum-value { background: green; } meter.custom::-webkit-meter-horizontal-suboptimal-value { background: yellow; } meter.custom::-webkit-meter-horizontal-even-less-good-value { background: red; } meter.custom::-webkit-meter-vertical-bar { background: gray; } meter.custom::-webkit-meter-vertical-optimum-value { background: blue; } meter.custom::-webkit-meter-vertical-suboptimal-value { background: purple; } meter.custom::-webkit-meter-vertical-even-less-good-value { background: white; } }}} Note that background "bar" part has directions, but has no state. With this style, following HTML fragment... {{{ }}} ...looks like: [[Image(custom-meter.png, 25%)]] === variations === On Mac OS X, WebKit provide 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 selectors and some nodes for message text. You can customize the appearance by changing the style of these pseudo selectors. {{{
::-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 validation messages. 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 selectors and some nodes for message text. You can customize the appearance by changing the style of these pseudo selectors. {{{
::-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 validation messages. 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#L618 (Search for "validation")