Changes between Version 5 and Version 6 of Styling Form Controls


Ignore:
Timestamp:
Mar 28, 2011, 6:42:38 PM (14 years ago)
Author:
tkent@chromium.org
Comment:

--

Legend:

Unmodified
Added
Removed
Modified

  • Styling Form Controls

    v5 v6  
    101101== Form validation message ==
    102102
     103=== WebKit r82179 or older (Chrome 10 and 11) ===
     104
     105A validation message consists of four DIV elements with pseudo classes.
     106
     107{{{
     108<DIV> ::-webkit-validation-bubble
     109    ┣ <DIV> ::-webkit-validation-bubble-top-outer-arrow
     110    ┣ <DIV> ::-webkit-validation-bubble-top-inner-arrow
     111    ┗ <DIV> ::-webkit-validation-bubble-message
     112         ┣ <B>
     113         ┃   ┗ Text node for the validation message
     114         ┗ Text nodes for the title attribute value
     115}}}
     116
    103117Suppose that you want to modify colors of validation messages. Add the following CSS declarations:
    104118{{{
    … …  
    119133}}}
    120134
     135=== WebKit r82180 or later ===
     136
     137A validation message consists of four DIV elements with pseudo classes.
     138
     139{{{
     140<DIV> ::-webkit-validation-bubble
     141    ┣ <DIV> ::-webkit-validation-bubble-arrow-clipper
     142    ┃  ┗ <DIV> ::-webkit-validation-bubble-arrow
     143    ┗ <DIV> ::-webkit-validation-bubble-message
     144         ┣ <B>
     145         ┃   ┗ Text node for the validation message
     146         ┗ Text nodes for the title attribute value
     147}}}
     148
     149...
     150
     151
    121152The default appearance is defined around http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css#L589 (Search for "validation")