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), 16 select, 17 input[type='checkbox'], 18 input[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), 35 select { 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 53 select { 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 64 html[dir='rtl'] select { 65 background-position: center left; 66 } 67 68 input[type='checkbox'] { 69 bottom: 2px; 70 height: 13px; 71 position: relative; 72 vertical-align: middle; 73 width: 13px; 74 } 75 76 input[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? */ 87 input[type='password'], 88 input[type='search'], 89 input[type='text'], 90 input[type='url'], 91 input[type='number'], 92 input:not([type]), 93 textarea { 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 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 /* Checked ********************************************************************/ 117 118 input[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 128 html[dir='rtl'] input[type='checkbox']:checked::before { 129 -webkit-transform: scaleX(-1); 130 } 131 132 input[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), 194 select: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 202 select:disabled { 203 /* OVERRIDE */ 204 background-image: url('../images/disabled_select.png'), 205 -webkit-linear-gradient(#f1f1f1, #f1f1f1 38%, #e6e6e6); 206 } 207 208 input:disabled:-webkit-any([type='checkbox'], 209 [type='radio']) { 210 opacity: .75; 211 } 212 213 input: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 304 label > input:disabled:-webkit-any([type='checkbox'], [type='radio']) ~ span { 305 color: #999; 306 } 307
