= 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 == === Removing spin buttons for === {{{ input::-webkit-inner-spin-button { -webkit-appearance: none; } input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } }}} === Autofill === The autofill color can be styled as of [http://trac.webkit.org/changeset/113511 WebKit r113511] or later (Chrome 20). The background and foreground colors can be overridden from [http://trac.webkit.org/changeset/113511/trunk/Source/WebCore/css/html.css their defaults]. {{{ input:-webkit-autofill { background: papayaWhip; color: hotPink; } }}} === Date input type === You can disable the native calendar picker by the following code: {{{ }}} Note: This doesn't work for iOS, Android, and Blackberry. There are no ways to specify the date format in the text box. It always reflects OS setting. Also, there are no ways to styling the native calendar picker. == 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; } }}} Another example: {{{ ::-webkit-validation-bubble-message { color: #eee; background: #000; border-color: #444; -webkit-box-shadow: 4px 4px 4px rgba(100,100,100,0.5); } ::-webkit-validation-bubble-message:before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 4px; background: url(http://trac.webkit.org/export/90202/trunk/Source/WebCore/inspector/front-end/Images/errorMediumIcon.png) } ::-webkit-validation-bubble-arrow { background: #000; border-color: #444; -webkit-box-shadow: 0 0 0 0; } }}} This shows the following bubble: [[Image(validation-bubble-styled.png)]] The default appearance is defined around http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css?rev=82180#L588 .