Version 12 (modified by 13 years ago) ( diff ) | ,
---|
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.
<progress>
By giving "-webkit-appearance: none;
", <progress>
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.
<progress> ┗ <div> ::-webkit-progress-bar ┗ <div>::-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 an example of <progress>
appearance customization in the WebKit test suite.
<meter>
As <progress>
, <meter>
also creates internal elements for rendering when "-webkit-appearance: none;
" is given.
Internal elements hierarchy is almost same as <progress>
<meter> ┗ <div> ::-webkit-progress-bar ┗ <div> ::-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 <progress>
.
An example is also available for <meter>
customization in the test suite.
<meter> variations
On Mac OS X, WebKit provides multiple built-in appearances for <meter>
.
-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:
<input> element
Removing spin buttons for <input type=number>
input::-webkit-inner-spin-button { -webkit-appearance: none; } input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
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.
<div> ::-webkit-validation-bubble ┣ <div> ::-webkit-validation-bubble-top-outer-arrow ┣ <div> ::-webkit-validation-bubble-top-inner-arrow ┗ <div> ::-webkit-validation-bubble-message ┣ <b> ┃ ┗ Text node for the validation message ┗ Text nodes and <br> 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: <text-color>; background: none; background-color: <background-color>; border-color: <border-color>; } ::-webkit-validation-bubble-top-outer-arrow { border-bottom-color: <border-color>; } ::-webkit-validation-bubble-top-inner-arrow { border-bottom-color: <background-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.
<div> ::-webkit-validation-bubble ┣ <div> ::-webkit-validation-bubble-arrow-clipper ┃ ┗ <div> ::-webkit-validation-bubble-arrow ┗ <div> ::-webkit-validation-bubble-message ┣ <b> ┃ ┗ Text node for the validation message ┗ Text nodes and <br> 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: <text-color>; background: <background-color>; border-color: <border-color>; -webkit-box-shadow: 0 0 0 0; } ::-webkit-validation-bubble-arrow { background: <background-color>; border-color: <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 .
Attachments (3)
-
custom-meter.png
(8.0 KB
) - added by 14 years ago.
A <meter> screenshot
-
custom-progress.png
(5.6 KB
) - added by 14 years ago.
A <progress> screenshot
- validation-bubble-styled.png (5.7 KB ) - added by 13 years ago.
Download all attachments as: .zip