Changes between Version 7 and Version 8 of Styling Form Controls
- Timestamp:
- Mar 30, 2011 6:36:45 AM (13 years ago)
Legend:
- Unmodified
- Added
- Removed
- Modified
-
Styling Form Controls
v7 v8 103 103 === WebKit r82179 or older (Chrome 10 and 11) === 104 104 105 A validation message consists of four DIV elements with pseudo classes. You can change the appearance by changing these pseudo classes.105 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. 106 106 107 107 {{{ 108 < DIV> ::-webkit-validation-bubble109 ┣ < DIV> ::-webkit-validation-bubble-top-outer-arrow110 ┣ < DIV> ::-webkit-validation-bubble-top-inner-arrow111 ┗ < DIV> ::-webkit-validation-bubble-message112 ┣ < 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> 113 113 ┃ ┗ Text node for the validation message 114 ┗ Text nodes for the title attribute value114 ┗ Text nodes and <br> elements for the title attribute value 115 115 }}} 116 116 … … 134 134 }}} 135 135 136 The default appearance is defined around http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css?rev=81155#L588 137 136 138 === WebKit r82180 or later === 137 139 138 A validation message consists of four DIV elements with pseudo classes.140 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. 139 141 140 142 {{{ 141 < DIV> ::-webkit-validation-bubble142 ┣ < DIV> ::-webkit-validation-bubble-arrow-clipper143 ┃ ┗ < DIV> ::-webkit-validation-bubble-arrow144 ┗ < DIV> ::-webkit-validation-bubble-message145 ┣ < 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> 146 148 ┃ ┗ Text node for the validation message 147 ┗ Text nodes for the title attribute value149 ┗ Text nodes and <br> elements for the title attribute value 148 150 }}} 149 151 … … 157 159 -webkit-box-shadow: 0 0 0 0; 158 160 } 161 159 162 ::-webkit-validation-bubble-arrow { 160 163 background: <background-color>; … … 164 167 }}} 165 168 166 The default appearance is defined around http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css#L 589(Search for "validation")169 The default appearance is defined around http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css#L618 (Search for "validation")