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