1010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis/* Copyright (c) 2012 The Chromium Authors. All rights reserved. 2010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis * Use of this source code is governed by a BSD-style license that can be 3010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis * found in the LICENSE file. 4010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis */ 5010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis 6010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis/* This file defines styles for form controls. The order of rule blocks is 7010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis * important as there are some rules with equal specificity that rely on order 8010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis * as a tiebreaker. These are marked with OVERRIDE. 9010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis */ 10010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis 11010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis/* Default state **************************************************************/ 12010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis 13010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennisbutton:not(.custom-appearance):not(.link-button), 14010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennisinput[type='button']:not(.custom-appearance):not(.link-button), 15010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennisinput[type='submit']:not(.custom-appearance):not(.link-button), 16010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennisselect, 17010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennisinput[type='checkbox'], 18010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennisinput[type='radio'] { 19010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis -webkit-appearance: none; 20010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis -webkit-user-select: none; 21010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis background-image: -webkit-linear-gradient(#ededed, #ededed 38%, #dedede); 22010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis border: 1px solid rgba(0, 0, 0, 0.25); 23010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis border-radius: 2px; 24010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), 25010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis inset 0 1px 2px rgba(255, 255, 255, 0.75); 26010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis color: #444; 27010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis font: inherit; 28010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis margin: 0 1px 0 0; 29010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis text-shadow: 0 1px 0 rgb(240, 240, 240); 30010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis} 31010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis 32010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennisbutton:not(.custom-appearance):not(.link-button), 33010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennisinput[type='button']:not(.custom-appearance):not(.link-button), 34010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennisinput[type='submit']:not(.custom-appearance):not(.link-button), 35010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennisselect { 36010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis min-height: 2em; 37010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis min-width: 4em; 38010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis<if expr="pp_ifdef('chromeos')"> 39010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis /* Without this rule, chromeos button text is too high on the button. */ 40010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis padding-top: 3px; 41010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis</if> 42010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis<if expr="is_win"> 43010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis /* The following platform-specific rule is necessary to get adjacent 44010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis * buttons, text inputs, and so forth to align on their borders while also 45010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis * aligning on the text's baselines. */ 46010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis padding-bottom: 1px; 47010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis</if> 48010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis} 49010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis 50010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennisbutton:not(.custom-appearance):not(.link-button), 51010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennisinput[type='button']:not(.custom-appearance):not(.link-button), 52010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennisinput[type='submit']:not(.custom-appearance):not(.link-button) { 53010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis -webkit-padding-end: 10px; 54010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis -webkit-padding-start: 10px; 55010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis} 56010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis 57010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennisselect { 58010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis -webkit-appearance: none; 59010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis -webkit-padding-end: 20px; 60010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis -webkit-padding-start: 6px; 61010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis /* OVERRIDE */ 62010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis background-image: url('../images/select.png'), 63010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis -webkit-linear-gradient(#ededed, #ededed 38%, #dedede); 64010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis background-position: right center; 65010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis background-repeat: no-repeat; 66010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis} 67010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis 68010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennishtml[dir='rtl'] select { 69010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis background-position: center left; 70010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis} 71010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis 72010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennisinput[type='checkbox'] { 73010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis bottom: 2px; 74010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis height: 13px; 75010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis position: relative; 76010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis vertical-align: middle; 77010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis width: 13px; 78010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis} 79010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis 80010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennisinput[type='radio'] { 81010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis /* OVERRIDE */ 82010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis border-radius: 100%; 83010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis bottom: 3px; 84010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis height: 15px; 85010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis position: relative; 86010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis vertical-align: middle; 87010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis width: 15px; 88010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis} 89010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis 90010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis/* TODO(estade): add more types here? */ 91010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennisinput[type='password'], 92010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennisinput[type='search'], 93010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennisinput[type='text'], 94010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennisinput[type='url'], 95010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennisinput:not([type]) { 96010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis border: 1px solid #bfbfbf; 97010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis border-radius: 2px; 98010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis box-sizing: border-box; 99010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis color: #444; 100010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis font: inherit; 101010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis margin: 0; 102010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis /* Use min-height to accommodate addditional padding for touch as needed. */ 103010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis min-height: 2em; 104010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis padding: 3px; 105010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis<if expr="is_win or is_macosx"> 106010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis /* For better alignment between adjacent buttons and inputs. */ 107010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis padding-bottom: 4px; 108010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis</if> 109010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis<if expr="pp_ifdef('chromeos')"> 110010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis /* For better alignment between adjacent buttons and inputs. */ 111010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis padding-bottom: 2px; 112010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis</if> 113010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis} 114010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis 115010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennisinput[type='search'] { 116010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis -webkit-appearance: textfield; 117010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis /* NOTE: Keep a relatively high min-width for this so we don't obscure the end 118010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis * of the default text in relatively spacious languages (i.e. German). */ 119010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis min-width: 160px; 120010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis} 121010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis 122010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis/* Checked ********************************************************************/ 123010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis 124010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennisinput[type='checkbox']:checked::before { 125010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis -webkit-user-select: none; 126010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis background-image: url('../images/check.png'); 127010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis background-size: 100% 100%; 128010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis content: ''; 129010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis display: block; 130010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis height: 100%; 131010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis width: 100%; 132010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis} 133010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis 134010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennishtml[dir='rtl'] input[type='checkbox']:checked::before { 135010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis -webkit-transform: scaleX(-1); 136010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis} 137010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis 138010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennisinput[type='radio']:checked::before { 139010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis background-color: #666; 140010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis border-radius: 100%; 141010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis bottom: 25%; 142010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis content: ''; 143010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis display: block; 144010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis left: 25%; 145010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis position: absolute; 146010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis right: 25%; 147010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis top: 25%; 148010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis} 149010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis 150010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis/* Hover **********************************************************************/ 151010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis 152010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennisbutton:not(.custom-appearance):not(.link-button):enabled:hover, 153010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennisinput[type='button']:not(.custom-appearance):not(.link-button):enabled:hover, 154010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennisinput[type='submit']:not(.custom-appearance):not(.link-button):enabled:hover, 155010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennisselect:enabled:hover, 156010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennisinput[type='checkbox']:enabled:hover, 157010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennisinput[type='radio']:enabled:hover { 158010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis background-image: -webkit-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0); 159010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis border-color: rgba(0, 0, 0, 0.3); 160010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12), 161010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis inset 0 1px 2px rgba(255, 255, 255, 0.95); 162010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis color: black; 163010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis} 164010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis 165010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennisselect:enabled:hover { 166010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis /* OVERRIDE */ 167010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis background-image: url('../images/select.png'), 168010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis -webkit-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0); 169010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis} 170010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis 171010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis/* Active *********************************************************************/ 172010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis 173010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennisbutton:not(.custom-appearance):not(.link-button):enabled:active, 174010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennisinput[type='button']:not(.custom-appearance):not(.link-button):enabled:active, 175010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennisinput[type='submit']:not(.custom-appearance):not(.link-button):enabled:active, 176010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennisselect:enabled:active, 177010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennisinput[type='checkbox']:enabled:active, 178010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennisinput[type='radio']:enabled:active { 179010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis background-image: -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7); 180010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis box-shadow: none; 181010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis text-shadow: none; 182010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis} 183010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis 184010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennisselect:enabled:active { 185010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis /* OVERRIDE */ 186010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis background-image: url('../images/select.png'), 187010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7); 188010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis} 189010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis 190010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis/* Disabled *******************************************************************/ 191010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis 192010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennisbutton:not(.custom-appearance):not(.link-button):disabled, 193010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennisinput[type='button']:not(.custom-appearance):not(.link-button):disabled, 194010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennisinput[type='submit']:not(.custom-appearance):not(.link-button):disabled, 195010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennisselect:disabled { 196010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis background-image: -webkit-linear-gradient(#f1f1f1, #f1f1f1 38%, #e6e6e6); 197010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis border-color: rgba(80, 80, 80, 0.2); 198010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis box-shadow: 0 1px 0 rgba(80, 80, 80, 0.08), 199010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis inset 0 1px 2px rgba(255, 255, 255, 0.75); 200010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis color: #aaa; 201010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis} 202010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis 203010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennisselect:disabled { 204010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis background-image: url('../images/disabled_select.png'), 205010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis -webkit-linear-gradient(#f1f1f1, #f1f1f1 38%, #e6e6e6); 206010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis} 207010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis 208010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennisinput[type='checkbox']:disabled, 209010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennisinput[type='radio']:disabled { 210010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis opacity: .75; 211010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis} 212010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis 213010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennisinput[type='password']:disabled, 214010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennisinput[type='search']:disabled, 215010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennisinput[type='text']:disabled, 216010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennisinput[type='url']:disabled, 217010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennisinput:not([type]):disabled { 218010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis color: #999; 219010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis} 220010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis 221010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis/* Focus **********************************************************************/ 222010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis 223010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennisbutton:not(.custom-appearance):not(.link-button):enabled:focus, 224010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennisinput[type='button']:not(.custom-appearance):enabled:focus, 225010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennisinput[type='checkbox']:enabled:focus, 226010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennisinput[type='password']:enabled:focus, 227010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennisinput[type='radio']:enabled:focus, 228010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennisinput[type='search']:enabled:focus, 229010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennisinput[type='submit']:not(.custom-appearance):enabled:focus, 230010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennisinput[type='text']:enabled:focus, 231010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennisinput[type='url']:enabled:focus, 232010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennisinput:not([type]):enabled:focus, 233010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennisselect:enabled:focus { 234010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis /* OVERRIDE */ 235010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis -webkit-transition: border-color 200ms; 236010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis /* We use border color because it follows the border radius (unlike outline). 237010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis * This is particularly noticeable on mac. */ 238010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis border-color: rgb(77, 144, 254); 239010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis outline: none; 240010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis} 241010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis 242010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis/* Link buttons ***************************************************************/ 243010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis 244010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis.link-button { 245010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis -webkit-box-shadow: none; 246010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis background: transparent none; 247010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis border: none; 248010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis color: rgb(17, 85, 204); 249010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis cursor: pointer; 250010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis /* Input elements have -webkit-small-control which can override the body font. 251010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis * Resolve this by using 'inherit'. */ 252010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis font: inherit; 253010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis margin: 0; 254010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis padding: 0 4px; 255010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis} 256010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis 257010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis.link-button:hover { 258010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis text-decoration: underline; 259010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis} 260010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis 261010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis.link-button:active { 262010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis color: rgb(5, 37, 119); 263010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis text-decoration: underline; 264010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis} 265010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis 266010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis.link-button[disabled] { 267010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis color: #999; 268010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis cursor: default; 269010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis text-decoration: none; 270010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis} 271010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis 272010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis/* Checkbox/radio helpers ****************************************************** 273010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis * 274010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis * .checkbox and .radio classes wrap labels. Checkboxes and radios should use 275010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis * these classes with the markup structure: 276010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis * 277010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis * <div class="checkbox"> 278010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis * <label> 279010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis * <input type="checkbox"></input> 280010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis * <span> 281010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis * </label> 282010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis * </div> 283010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis */ 284010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis 285010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis.checkbox, 286010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis.radio { 287010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis margin: 0.65em 0; 288010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis} 289010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis 290010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis.checkbox label, 291010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis.radio label { 292010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis /* Don't expand horizontally: <http://crbug.com/112091>. */ 293010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis display: -webkit-inline-box; 294010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis} 295010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis 296010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis.checkbox label input ~ span, 297010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis.radio label input ~ span { 298010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis -webkit-margin-start: 0.6em; 299010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis /* Make sure long spans wrap at the same horizontal position they start. */ 300010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis display: block; 301010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis} 302010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis 303010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis.checkbox label:hover, 304010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis.radio label:hover { 305010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis color: black; 306010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis} 307010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis 308010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennislabel > input[type=checkbox]:disabled ~ span, 309010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennislabel > input[type=radio]:disabled ~ span { 310010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis color: #999; 311010583560e0e6db74fe50b840bce46ba6537de63Jamie Gennis} 312