OLD | NEW |
1 /* Copyright (c) 2012 The Chromium Authors. All rights reserved. | 1 /* Copyright (c) 2012 The Chromium Authors. All rights reserved. |
2 * Use of this source code is governed by a BSD-style license that can be | 2 * Use of this source code is governed by a BSD-style license that can be |
3 * found in the LICENSE file. */ | 3 * found in the LICENSE file. */ |
4 | 4 |
5 /* This file defines styles for form controls. The order of rule blocks is | 5 /* This file defines styles for form controls. The order of rule blocks is |
6 * important as there are some rules with equal specificity that rely on order | 6 * important as there are some rules with equal specificity that rely on order |
7 * as a tiebreaker. These are marked with OVERRIDE. */ | 7 * as a tiebreaker. These are marked with OVERRIDE. */ |
8 | 8 |
9 @import url(action_link.css); | 9 @import url(action_link.css); |
10 | 10 |
11 /* Default state **************************************************************/ | 11 /* Default state **************************************************************/ |
12 | 12 |
13 :-webkit-any(button, | 13 :-webkit-any(button, |
14 input[type='button'], | 14 input[type='button'], |
15 input[type='submit']):not(.custom-appearance), | 15 input[type='submit']):not(.custom-appearance), |
16 select, | 16 select, |
17 input[type='checkbox'], | 17 input[type='checkbox'], |
18 input[type='radio'] { | 18 input[type='radio'] { |
19 -webkit-appearance: none; | 19 -webkit-appearance: none; |
20 -webkit-user-select: none; | |
21 background-image: -webkit-linear-gradient(#ededed, #ededed 38%, #dedede); | 20 background-image: -webkit-linear-gradient(#ededed, #ededed 38%, #dedede); |
22 border: 1px solid rgba(0, 0, 0, 0.25); | 21 border: 1px solid rgba(0, 0, 0, 0.25); |
23 border-radius: 2px; | 22 border-radius: 2px; |
24 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), | 23 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), |
25 inset 0 1px 2px rgba(255, 255, 255, 0.75); | 24 inset 0 1px 2px rgba(255, 255, 255, 0.75); |
26 color: #444; | 25 color: #444; |
27 font: inherit; | 26 font: inherit; |
28 margin: 0 1px 0 0; | 27 margin: 0 1px 0 0; |
29 outline: none; | 28 outline: none; |
30 text-shadow: 0 1px 0 rgb(240, 240, 240); | 29 text-shadow: 0 1px 0 rgb(240, 240, 240); |
| 30 user-select: none; |
31 } | 31 } |
32 | 32 |
33 :-webkit-any(button, | 33 :-webkit-any(button, |
34 input[type='button'], | 34 input[type='button'], |
35 input[type='submit']):not(.custom-appearance), | 35 input[type='submit']):not(.custom-appearance), |
36 select { | 36 select { |
37 min-height: 2em; | 37 min-height: 2em; |
38 min-width: 4em; | 38 min-width: 4em; |
39 padding-top: 1px; | 39 padding-top: 1px; |
40 padding-bottom: 1px; | 40 padding-bottom: 1px; |
(...skipping 70 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
111 input[type='search'] { | 111 input[type='search'] { |
112 -webkit-appearance: textfield; | 112 -webkit-appearance: textfield; |
113 /* NOTE: Keep a relatively high min-width for this so we don't obscure the end | 113 /* NOTE: Keep a relatively high min-width for this so we don't obscure the end |
114 * of the default text in relatively spacious languages (i.e. German). */ | 114 * of the default text in relatively spacious languages (i.e. German). */ |
115 min-width: 160px; | 115 min-width: 160px; |
116 } | 116 } |
117 | 117 |
118 /* Checked ********************************************************************/ | 118 /* Checked ********************************************************************/ |
119 | 119 |
120 input[type='checkbox']:checked::before { | 120 input[type='checkbox']:checked::before { |
121 -webkit-user-select: none; | |
122 background-image: url(../images/check.png); | 121 background-image: url(../images/check.png); |
123 background-size: 100% 100%; | 122 background-size: 100% 100%; |
124 content: ''; | 123 content: ''; |
125 display: block; | 124 display: block; |
126 height: 100%; | 125 height: 100%; |
| 126 user-select: none; |
127 width: 100%; | 127 width: 100%; |
128 } | 128 } |
129 | 129 |
130 input[type='radio']:checked::before { | 130 input[type='radio']:checked::before { |
131 background-color: #666; | 131 background-color: #666; |
132 border-radius: 100%; | 132 border-radius: 100%; |
133 bottom: 3px; | 133 bottom: 3px; |
134 content: ''; | 134 content: ''; |
135 display: block; | 135 display: block; |
136 left: 3px; | 136 left: 3px; |
(...skipping 112 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
249 * | 249 * |
250 * <div class="checkbox"> | 250 * <div class="checkbox"> |
251 * <label> | 251 * <label> |
252 * <input type="checkbox"></input> | 252 * <input type="checkbox"></input> |
253 * <span> | 253 * <span> |
254 * </label> | 254 * </label> |
255 * </div> | 255 * </div> |
256 */ | 256 */ |
257 | 257 |
258 :-webkit-any(.checkbox, .radio) label { | 258 :-webkit-any(.checkbox, .radio) label { |
259 -webkit-user-select: none; | |
260 /* Don't expand horizontally: <http://crbug.com/112091>. */ | 259 /* Don't expand horizontally: <http://crbug.com/112091>. */ |
261 align-items: center; | 260 align-items: center; |
262 display: inline-flex; | 261 display: inline-flex; |
263 padding-bottom: 7px; | 262 padding-bottom: 7px; |
264 padding-top: 7px; | 263 padding-top: 7px; |
| 264 user-select: none; |
265 } | 265 } |
266 | 266 |
267 :-webkit-any(.checkbox, .radio) label input { | 267 :-webkit-any(.checkbox, .radio) label input { |
268 flex-shrink: 0; | 268 flex-shrink: 0; |
269 } | 269 } |
270 | 270 |
271 :-webkit-any(.checkbox, .radio) label input ~ span { | 271 :-webkit-any(.checkbox, .radio) label input ~ span { |
272 -webkit-margin-start: 0.6em; | 272 -webkit-margin-start: 0.6em; |
273 /* Make sure long spans wrap at the same horizontal position they start. */ | 273 /* Make sure long spans wrap at the same horizontal position they start. */ |
274 display: block; | 274 display: block; |
275 } | 275 } |
276 | 276 |
277 :-webkit-any(.checkbox, .radio) label:hover { | 277 :-webkit-any(.checkbox, .radio) label:hover { |
278 color: black; | 278 color: black; |
279 } | 279 } |
280 | 280 |
281 label > input:disabled:-webkit-any([type='checkbox'], [type='radio']) ~ span { | 281 label > input:disabled:-webkit-any([type='checkbox'], [type='radio']) ~ span { |
282 color: #999; | 282 color: #999; |
283 } | 283 } |
284 | 284 |
285 extensionview { | 285 extensionview { |
286 display: inline-block; | 286 display: inline-block; |
287 height: 300px; | 287 height: 300px; |
288 width: 300px; | 288 width: 300px; |
289 } | 289 } |
OLD | NEW |