Changes between Version 7 and Version 8 of Styling Form Controls


Ignore:
Timestamp:
Mar 30, 2011 6:36:45 AM (10 years ago)
Author:
tkent@chromium.org
Comment:

--

Legend:

Unmodified
Added
Removed
Modified
  • Styling Form Controls

    v7 v8  
    103103=== WebKit r82179 or older (Chrome 10 and 11) ===
    104104
    105 A validation message consists of four DIV elements with pseudo classes.  You can change the appearance by changing these pseudo classes.
     105A 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.
    106106
    107107{{{
    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>
     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>
    113113         ┃   ┗ Text node for the validation message
    114          ┗ Text nodes for the title attribute value
     114         ┗ Text nodes and <br> elements for the title attribute value
    115115}}}
    116116
     
    134134}}}
    135135
     136The default appearance is defined around http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css?rev=81155#L588
     137
    136138=== WebKit r82180 or later ===
    137139
    138 A validation message consists of four DIV elements with pseudo classes.
     140A 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.
    139141
    140142{{{
    141 <DIV> ::-webkit-validation-bubble
    142     ┣ <DIV> ::-webkit-validation-bubble-arrow-clipper
    143     ┃  ┗ <DIV> ::-webkit-validation-bubble-arrow
    144     ┗ <DIV> ::-webkit-validation-bubble-message
    145          ┣ <B>
     143<div> ::-webkit-validation-bubble
     144    ┣ <div> ::-webkit-validation-bubble-arrow-clipper
     145    ┃  ┗ <div> ::-webkit-validation-bubble-arrow
     146    ┗ <div> ::-webkit-validation-bubble-message
     147         ┣ <b>
    146148         ┃   ┗ Text node for the validation message
    147          ┗ Text nodes for the title attribute value
     149         ┗ Text nodes and <br> elements for the title attribute value
    148150}}}
    149151
     
    157159    -webkit-box-shadow: 0 0 0 0;
    158160}
     161
    159162::-webkit-validation-bubble-arrow {
    160163    background: <background-color>;
     
    164167}}}
    165168
    166 The default appearance is defined around http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css#L589 (Search for "validation")
     169The default appearance is defined around http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css#L618 (Search for "validation")