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