widgets.css revision 2a99a7e74a7f215066514fe81d2bfa6639d9eddd
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 3 * found in the LICENSE file. */ 4 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 7 * as a tiebreaker. These are marked with OVERRIDE. */ 8 9/* Default state **************************************************************/ 10 11:-webkit-any(button, 12 input[type='button'], 13 input[type='submit']):not(.custom-appearance):not(.link-button), 14select, 15input[type='checkbox'], 16input[type='radio'] { 17 -webkit-appearance: none; 18 -webkit-user-select: none; 19 background-image: -webkit-linear-gradient(#ededed, #ededed 38%, #dedede); 20 border: 1px solid rgba(0, 0, 0, 0.25); 21 border-radius: 2px; 22 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), 23 inset 0 1px 2px rgba(255, 255, 255, 0.75); 24 color: #444; 25 font: inherit; 26 margin: 0 1px 0 0; 27 text-shadow: 0 1px 0 rgb(240, 240, 240); 28} 29 30:-webkit-any(button, 31 input[type='button'], 32 input[type='submit']):not(.custom-appearance):not(.link-button), 33select { 34 min-height: 2em; 35 min-width: 4em; 36<if expr="is_win"> 37 /* The following platform-specific rule is necessary to get adjacent 38 * buttons, text inputs, and so forth to align on their borders while also 39 * aligning on the text's baselines. */ 40 padding-bottom: 1px; 41</if> 42} 43 44:-webkit-any(button, 45 input[type='button'], 46 input[type='submit']):not(.custom-appearance):not(.link-button) { 47 -webkit-padding-end: 10px; 48 -webkit-padding-start: 10px; 49} 50 51select { 52 -webkit-appearance: none; 53 -webkit-padding-end: 20px; 54 -webkit-padding-start: 6px; 55 /* OVERRIDE */ 56 background-image: url('../images/select.png'), 57 -webkit-linear-gradient(#ededed, #ededed 38%, #dedede); 58 background-position: right center; 59 background-repeat: no-repeat; 60} 61 62html[dir='rtl'] select { 63 background-position: center left; 64} 65 66input[type='checkbox'] { 67 bottom: 2px; 68 height: 13px; 69 position: relative; 70 vertical-align: middle; 71 width: 13px; 72} 73 74input[type='radio'] { 75 /* OVERRIDE */ 76 border-radius: 100%; 77 bottom: 3px; 78 height: 15px; 79 position: relative; 80 vertical-align: middle; 81 width: 15px; 82} 83 84/* TODO(estade): add more types here? */ 85input[type='password'], 86input[type='search'], 87input[type='text'], 88input[type='url'], 89input:not([type]), 90textarea { 91 border: 1px solid #bfbfbf; 92 border-radius: 2px; 93 box-sizing: border-box; 94 color: #444; 95 font: inherit; 96 margin: 0; 97 /* Use min-height to accommodate addditional padding for touch as needed. */ 98 min-height: 2em; 99 padding: 3px; 100<if expr="is_win or is_macosx"> 101 /* For better alignment between adjacent buttons and inputs. */ 102 padding-bottom: 4px; 103</if> 104} 105 106input[type='search'] { 107 -webkit-appearance: textfield; 108 /* NOTE: Keep a relatively high min-width for this so we don't obscure the end 109 * of the default text in relatively spacious languages (i.e. German). */ 110 min-width: 160px; 111} 112 113/* Remove when https://bugs.webkit.org/show_bug.cgi?id=51499 is fixed. 114 * TODO(dbeam): are there more types that would benefit from this? */ 115input[type='search']::-webkit-textfield-decoration-container { 116 direction: inherit; 117} 118 119/* Checked ********************************************************************/ 120 121input[type='checkbox']:checked::before { 122 -webkit-user-select: none; 123 background-image: url('../images/check.png'); 124 background-size: 100% 100%; 125 content: ''; 126 display: block; 127 height: 100%; 128 width: 100%; 129} 130 131html[dir='rtl'] input[type='checkbox']:checked::before { 132 -webkit-transform: scaleX(-1); 133} 134 135input[type='radio']:checked::before { 136 background-color: #666; 137 border-radius: 100%; 138 bottom: 3px; 139 content: ''; 140 display: block; 141 left: 3px; 142 position: absolute; 143 right: 3px; 144 top: 3px; 145} 146 147/* Hover **********************************************************************/ 148 149:enabled:hover:-webkit-any( 150 select, 151 input[type='checkbox'], 152 input[type='radio'], 153 :-webkit-any( 154 button, 155 input[type='button'], 156 input[type='submit']):not(.custom-appearance):not(.link-button)) { 157 background-image: -webkit-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0); 158 border-color: rgba(0, 0, 0, 0.3); 159 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12), 160 inset 0 1px 2px rgba(255, 255, 255, 0.95); 161 color: black; 162} 163 164:enabled:hover:-webkit-any(select) { 165 /* OVERRIDE */ 166 background-image: url('../images/select.png'), 167 -webkit-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0); 168} 169 170/* Active *********************************************************************/ 171 172:enabled:active:-webkit-any( 173 select, 174 input[type='checkbox'], 175 input[type='radio'], 176 :-webkit-any( 177 button, 178 input[type='button'], 179 input[type='submit']):not(.custom-appearance):not(.link-button)) { 180 background-image: -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7); 181 box-shadow: none; 182 text-shadow: none; 183} 184 185:enabled:active:-webkit-any(select) { 186 /* OVERRIDE */ 187 background-image: url('../images/select.png'), 188 -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7); 189} 190 191/* Disabled *******************************************************************/ 192 193:disabled:-webkit-any( 194 button, 195 input[type='button'], 196 input[type='submit']):not(.custom-appearance):not(.link-button), 197select:disabled { 198 background-image: -webkit-linear-gradient(#f1f1f1, #f1f1f1 38%, #e6e6e6); 199 border-color: rgba(80, 80, 80, 0.2); 200 box-shadow: 0 1px 0 rgba(80, 80, 80, 0.08), 201 inset 0 1px 2px rgba(255, 255, 255, 0.75); 202 color: #aaa; 203} 204 205select:disabled { 206 /* OVERRIDE */ 207 background-image: url('../images/disabled_select.png'), 208 -webkit-linear-gradient(#f1f1f1, #f1f1f1 38%, #e6e6e6); 209} 210 211input:disabled:-webkit-any([type='checkbox'], 212 [type='radio']) { 213 opacity: .75; 214} 215 216input:disabled:-webkit-any([type='password'], 217 [type='search'], 218 [type='text'], 219 [type='url'], 220 :not([type])) { 221 color: #999; 222} 223 224/* Focus **********************************************************************/ 225 226:enabled:focus:-webkit-any( 227 select, 228 input[type='checkbox'], 229 input[type='password'], 230 input[type='radio'], 231 input[type='search'], 232 input[type='text'], 233 input[type='url'], 234 input:not([type]), 235 :-webkit-any( 236 button, 237 input[type='button'], 238 input[type='submit']):not(.custom-appearance):not(.link-button)) { 239 /* OVERRIDE */ 240 -webkit-transition: border-color 200ms; 241 /* We use border color because it follows the border radius (unlike outline). 242 * This is particularly noticeable on mac. */ 243 border-color: rgb(77, 144, 254); 244 outline: none; 245} 246 247/* Link buttons ***************************************************************/ 248 249.link-button { 250 -webkit-box-shadow: none; 251 background: transparent none; 252 border: none; 253 color: rgb(17, 85, 204); 254 cursor: pointer; 255 /* Input elements have -webkit-small-control which can override the body font. 256 * Resolve this by using 'inherit'. */ 257 font: inherit; 258 margin: 0; 259 padding: 0 4px; 260} 261 262.link-button:hover { 263 text-decoration: underline; 264} 265 266.link-button:active { 267 color: rgb(5, 37, 119); 268 text-decoration: underline; 269} 270 271.link-button[disabled] { 272 color: #999; 273 cursor: default; 274 text-decoration: none; 275} 276 277/* Checkbox/radio helpers ****************************************************** 278 * 279 * .checkbox and .radio classes wrap labels. Checkboxes and radios should use 280 * these classes with the markup structure: 281 * 282 * <div class="checkbox"> 283 * <label> 284 * <input type="checkbox"></input> 285 * <span> 286 * </label> 287 * </div> 288 */ 289 290:-webkit-any(.checkbox, .radio) label { 291 /* Don't expand horizontally: <http://crbug.com/112091>. */ 292 display: -webkit-inline-box; 293 padding-bottom: 7px; 294 padding-top: 7px; 295} 296 297:-webkit-any(.checkbox, .radio) label input ~ span { 298 -webkit-margin-start: 0.6em; 299 /* Make sure long spans wrap at the same horizontal position they start. */ 300 display: block; 301} 302 303:-webkit-any(.checkbox, .radio) label:hover { 304 color: black; 305} 306 307label > input:disabled:-webkit-any([type='checkbox'], [type='radio']) ~ span { 308 color: #999; 309} 310