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), 14 select, 15 input[type='checkbox'], 16 input[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 outline: none; 28 text-shadow: 0 1px 0 rgb(240, 240, 240); 29 } 30 31 :-webkit-any(button, 32 input[type='button'], 33 input[type='submit']):not(.custom-appearance):not(.link-button), 34 select { 35 min-height: 2em; 36 min-width: 4em; 37 <if expr="is_win"> 38 /* The following platform-specific rule is necessary to get adjacent 39 * buttons, text inputs, and so forth to align on their borders while also 40 * aligning on the text's baselines. */ 41 padding-bottom: 1px; 42 </if> 43 } 44 45 :-webkit-any(button, 46 input[type='button'], 47 input[type='submit']):not(.custom-appearance):not(.link-button) { 48 -webkit-padding-end: 10px; 49 -webkit-padding-start: 10px; 50 } 51 52 select { 53 -webkit-appearance: none; 54 -webkit-padding-end: 20px; 55 -webkit-padding-start: 6px; 56 /* OVERRIDE */ 57 background-image: url('../images/select.png'), 58 -webkit-linear-gradient(#ededed, #ededed 38%, #dedede); 59 background-position: right center; 60 background-repeat: no-repeat; 61 } 62 63 html[dir='rtl'] select { 64 background-position: center left; 65 } 66 67 input[type='checkbox'] { 68 bottom: 2px; 69 height: 13px; 70 position: relative; 71 vertical-align: middle; 72 width: 13px; 73 } 74 75 input[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? */ 86 input[type='number'], 87 input[type='password'], 88 input[type='search'], 89 input[type='text'], 90 input[type='url'], 91 input:not([type]), 92 textarea { 93 border: 1px solid #bfbfbf; 94 border-radius: 2px; 95 box-sizing: border-box; 96 color: #444; 97 font: inherit; 98 margin: 0; 99 /* Use min-height to accommodate addditional padding for touch as needed. */ 100 min-height: 2em; 101 padding: 3px; 102 outline: none; 103 <if expr="is_win or is_macosx or is_ios"> 104 /* For better alignment between adjacent buttons and inputs. */ 105 padding-bottom: 4px; 106 </if> 107 } 108 109 input[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 /* Remove when https://bugs.webkit.org/show_bug.cgi?id=51499 is fixed. 117 * TODO(dbeam): are there more types that would benefit from this? */ 118 input[type='search']::-webkit-textfield-decoration-container { 119 direction: inherit; 120 } 121 122 /* Checked ********************************************************************/ 123 124 input[type='checkbox']:checked::before { 125 -webkit-user-select: none; 126 background-image: url('../images/check.png'); 127 background-size: 100% 100%; 128 content: ''; 129 display: block; 130 height: 100%; 131 width: 100%; 132 } 133 134 input[type='radio']:checked::before { 135 background-color: #666; 136 border-radius: 100%; 137 bottom: 3px; 138 content: ''; 139 display: block; 140 left: 3px; 141 position: absolute; 142 right: 3px; 143 top: 3px; 144 } 145 146 /* Hover **********************************************************************/ 147 148 :enabled:hover:-webkit-any( 149 select, 150 input[type='checkbox'], 151 input[type='radio'], 152 :-webkit-any( 153 button, 154 input[type='button'], 155 input[type='submit']):not(.custom-appearance):not(.link-button)) { 156 background-image: -webkit-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0); 157 border-color: rgba(0, 0, 0, 0.3); 158 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12), 159 inset 0 1px 2px rgba(255, 255, 255, 0.95); 160 color: black; 161 } 162 163 :enabled:hover:-webkit-any(select) { 164 /* OVERRIDE */ 165 background-image: url('../images/select.png'), 166 -webkit-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0); 167 } 168 169 /* Active *********************************************************************/ 170 171 :enabled:active:-webkit-any( 172 select, 173 input[type='checkbox'], 174 input[type='radio'], 175 :-webkit-any( 176 button, 177 input[type='button'], 178 input[type='submit']):not(.custom-appearance):not(.link-button)) { 179 background-image: -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7); 180 box-shadow: none; 181 text-shadow: none; 182 } 183 184 :enabled:active:-webkit-any(select) { 185 /* OVERRIDE */ 186 background-image: url('../images/select.png'), 187 -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7); 188 } 189 190 /* Disabled *******************************************************************/ 191 192 :disabled:-webkit-any( 193 button, 194 input[type='button'], 195 input[type='submit']):not(.custom-appearance):not(.link-button), 196 select:disabled { 197 background-image: -webkit-linear-gradient(#f1f1f1, #f1f1f1 38%, #e6e6e6); 198 border-color: rgba(80, 80, 80, 0.2); 199 box-shadow: 0 1px 0 rgba(80, 80, 80, 0.08), 200 inset 0 1px 2px rgba(255, 255, 255, 0.75); 201 color: #aaa; 202 } 203 204 select:disabled { 205 /* OVERRIDE */ 206 background-image: url('../images/disabled_select.png'), 207 -webkit-linear-gradient(#f1f1f1, #f1f1f1 38%, #e6e6e6); 208 } 209 210 input:disabled:-webkit-any([type='checkbox'], 211 [type='radio']) { 212 opacity: .75; 213 } 214 215 input:disabled:-webkit-any([type='password'], 216 [type='search'], 217 [type='text'], 218 [type='url'], 219 :not([type])) { 220 color: #999; 221 } 222 223 /* Focus **********************************************************************/ 224 225 :enabled:focus:-webkit-any( 226 select, 227 input[type='checkbox'], 228 input[type='number'], 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 307 label > input:disabled:-webkit-any([type='checkbox'], [type='radio']) ~ span { 308 color: #999; 309 } 310
