15821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/* Copyright (c) 2012 The Chromium Authors. All rights reserved. 25821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Use of this source code is governed by a BSD-style license that can be 35821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * found in the LICENSE file. */ 45821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 55821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/* This file defines styles for form controls. The order of rule blocks is 65821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * important as there are some rules with equal specificity that rely on order 75821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * as a tiebreaker. These are marked with OVERRIDE. */ 85821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 95821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/* Default state **************************************************************/ 105821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 115821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles):-webkit-any(button, 125821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) input[type='button'], 135821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) input[type='submit']):not(.custom-appearance):not(.link-button), 145821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)select, 155821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)input[type='checkbox'], 165821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)input[type='radio'] { 175821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-appearance: none; 185821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-user-select: none; 195821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background-image: -webkit-linear-gradient(#ededed, #ededed 38%, #dedede); 205821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) border: 1px solid rgba(0, 0, 0, 0.25); 215821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) border-radius: 2px; 225821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), 235821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) inset 0 1px 2px rgba(255, 255, 255, 0.75); 245821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) color: #444; 255821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) font: inherit; 265821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) margin: 0 1px 0 0; 275821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) text-shadow: 0 1px 0 rgb(240, 240, 240); 285821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 295821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 305821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles):-webkit-any(button, 315821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) input[type='button'], 325821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) input[type='submit']):not(.custom-appearance):not(.link-button), 335821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)select { 345821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) min-height: 2em; 355821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) min-width: 4em; 365821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)<if expr="is_win"> 375821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /* The following platform-specific rule is necessary to get adjacent 385821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * buttons, text inputs, and so forth to align on their borders while also 395821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * aligning on the text's baselines. */ 405821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) padding-bottom: 1px; 415821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)</if> 425821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 435821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 445821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles):-webkit-any(button, 455821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) input[type='button'], 465821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) input[type='submit']):not(.custom-appearance):not(.link-button) { 475821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-padding-end: 10px; 485821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-padding-start: 10px; 495821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 505821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 515821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)select { 525821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-appearance: none; 535821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-padding-end: 20px; 545821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-padding-start: 6px; 555821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /* OVERRIDE */ 565821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background-image: url('../images/select.png'), 575821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-linear-gradient(#ededed, #ededed 38%, #dedede); 585821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background-position: right center; 595821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background-repeat: no-repeat; 605821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 615821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 625821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)html[dir='rtl'] select { 635821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background-position: center left; 645821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 655821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 665821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)input[type='checkbox'] { 675821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) bottom: 2px; 685821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) height: 13px; 695821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) position: relative; 705821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) vertical-align: middle; 715821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) width: 13px; 725821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 735821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 745821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)input[type='radio'] { 755821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /* OVERRIDE */ 765821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) border-radius: 100%; 775821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) bottom: 3px; 785821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) height: 15px; 795821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) position: relative; 805821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) vertical-align: middle; 815821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) width: 15px; 825821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 835821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 845821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/* TODO(estade): add more types here? */ 857dbb3d5cf0c15f500944d211057644d6a2f37371Ben Murdochinput[type='number'], 865821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)input[type='password'], 875821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)input[type='search'], 885821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)input[type='text'], 895821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)input[type='url'], 905821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)input:not([type]), 915821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)textarea { 925821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) border: 1px solid #bfbfbf; 935821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) border-radius: 2px; 945821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) box-sizing: border-box; 955821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) color: #444; 965821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) font: inherit; 975821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) margin: 0; 985821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /* Use min-height to accommodate addditional padding for touch as needed. */ 995821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) min-height: 2em; 1005821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) padding: 3px; 1015821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)<if expr="is_win or is_macosx"> 1025821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /* For better alignment between adjacent buttons and inputs. */ 1035821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) padding-bottom: 4px; 1045821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)</if> 1055821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 1065821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1075821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)input[type='search'] { 1085821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-appearance: textfield; 1095821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /* NOTE: Keep a relatively high min-width for this so we don't obscure the end 1105821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * of the default text in relatively spacious languages (i.e. German). */ 1115821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) min-width: 160px; 1125821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 1135821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1142a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles)/* Remove when https://bugs.webkit.org/show_bug.cgi?id=51499 is fixed. 1152a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) * TODO(dbeam): are there more types that would benefit from this? */ 1162a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles)input[type='search']::-webkit-textfield-decoration-container { 1172a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) direction: inherit; 1182a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles)} 1192a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) 1205821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/* Checked ********************************************************************/ 1215821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1225821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)input[type='checkbox']:checked::before { 1235821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-user-select: none; 1245821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background-image: url('../images/check.png'); 1255821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background-size: 100% 100%; 1265821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) content: ''; 1275821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) display: block; 1285821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) height: 100%; 1295821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) width: 100%; 1305821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 1315821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1325821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)input[type='radio']:checked::before { 1335821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background-color: #666; 1345821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) border-radius: 100%; 1355821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) bottom: 3px; 1365821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) content: ''; 1375821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) display: block; 1385821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) left: 3px; 1395821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) position: absolute; 1405821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) right: 3px; 1415821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) top: 3px; 1425821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 1435821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1445821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/* Hover **********************************************************************/ 1455821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1465821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles):enabled:hover:-webkit-any( 1475821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) select, 1485821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) input[type='checkbox'], 1495821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) input[type='radio'], 1505821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) :-webkit-any( 1515821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) button, 1525821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) input[type='button'], 1535821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) input[type='submit']):not(.custom-appearance):not(.link-button)) { 1545821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background-image: -webkit-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0); 1555821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) border-color: rgba(0, 0, 0, 0.3); 1565821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12), 1575821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) inset 0 1px 2px rgba(255, 255, 255, 0.95); 1585821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) color: black; 1595821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 1605821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1615821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles):enabled:hover:-webkit-any(select) { 1625821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /* OVERRIDE */ 1635821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background-image: url('../images/select.png'), 1645821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0); 1655821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 1665821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1675821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/* Active *********************************************************************/ 1685821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1695821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles):enabled:active:-webkit-any( 1705821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) select, 1715821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) input[type='checkbox'], 1725821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) input[type='radio'], 1735821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) :-webkit-any( 1745821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) button, 1755821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) input[type='button'], 1765821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) input[type='submit']):not(.custom-appearance):not(.link-button)) { 1775821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background-image: -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7); 1785821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) box-shadow: none; 1795821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) text-shadow: none; 1805821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 1815821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1825821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles):enabled:active:-webkit-any(select) { 1835821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /* OVERRIDE */ 1845821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background-image: url('../images/select.png'), 1855821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7); 1865821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 1875821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1885821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/* Disabled *******************************************************************/ 1895821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1905821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles):disabled:-webkit-any( 1915821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) button, 1925821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) input[type='button'], 1935821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) input[type='submit']):not(.custom-appearance):not(.link-button), 1945821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)select:disabled { 1955821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background-image: -webkit-linear-gradient(#f1f1f1, #f1f1f1 38%, #e6e6e6); 1965821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) border-color: rgba(80, 80, 80, 0.2); 1975821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) box-shadow: 0 1px 0 rgba(80, 80, 80, 0.08), 1985821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) inset 0 1px 2px rgba(255, 255, 255, 0.75); 1995821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) color: #aaa; 2005821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 2015821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 2025821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)select:disabled { 2035821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /* OVERRIDE */ 2045821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background-image: url('../images/disabled_select.png'), 2055821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-linear-gradient(#f1f1f1, #f1f1f1 38%, #e6e6e6); 2065821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 2075821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 2085821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)input:disabled:-webkit-any([type='checkbox'], 2095821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) [type='radio']) { 2105821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) opacity: .75; 2115821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 2125821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 2135821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)input:disabled:-webkit-any([type='password'], 2145821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) [type='search'], 2155821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) [type='text'], 2165821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) [type='url'], 2175821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) :not([type])) { 2185821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) color: #999; 2195821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 2205821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 2215821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/* Focus **********************************************************************/ 2225821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 2235821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles):enabled:focus:-webkit-any( 2245821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) select, 2255821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) input[type='checkbox'], 2267dbb3d5cf0c15f500944d211057644d6a2f37371Ben Murdoch input[type='number'], 2275821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) input[type='password'], 2285821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) input[type='radio'], 2295821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) input[type='search'], 2305821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) input[type='text'], 2315821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) input[type='url'], 2325821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) input:not([type]), 2335821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) :-webkit-any( 2345821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) button, 2355821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) input[type='button'], 2365821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) input[type='submit']):not(.custom-appearance):not(.link-button)) { 2375821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /* OVERRIDE */ 2385821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-transition: border-color 200ms; 2395821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /* We use border color because it follows the border radius (unlike outline). 2405821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * This is particularly noticeable on mac. */ 2415821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) border-color: rgb(77, 144, 254); 2425821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) outline: none; 2435821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 2445821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 2455821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/* Link buttons ***************************************************************/ 2465821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 2475821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).link-button { 2485821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-box-shadow: none; 2495821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background: transparent none; 2505821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) border: none; 2515821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) color: rgb(17, 85, 204); 2525821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) cursor: pointer; 2535821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /* Input elements have -webkit-small-control which can override the body font. 2545821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Resolve this by using 'inherit'. */ 2555821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) font: inherit; 2565821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) margin: 0; 2575821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) padding: 0 4px; 2585821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 2595821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 2605821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).link-button:hover { 2615821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) text-decoration: underline; 2625821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 2635821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 2645821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).link-button:active { 2655821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) color: rgb(5, 37, 119); 2665821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) text-decoration: underline; 2675821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 2685821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 2695821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).link-button[disabled] { 2705821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) color: #999; 2715821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) cursor: default; 2725821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) text-decoration: none; 2735821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 2745821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 2755821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/* Checkbox/radio helpers ****************************************************** 2765821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * 2775821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * .checkbox and .radio classes wrap labels. Checkboxes and radios should use 2785821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * these classes with the markup structure: 2795821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * 2805821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * <div class="checkbox"> 2815821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * <label> 2825821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * <input type="checkbox"></input> 2835821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * <span> 2845821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * </label> 2855821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * </div> 2865821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 2875821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 2885821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles):-webkit-any(.checkbox, .radio) label { 2895821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /* Don't expand horizontally: <http://crbug.com/112091>. */ 2905821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) display: -webkit-inline-box; 2915821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) padding-bottom: 7px; 2925821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) padding-top: 7px; 2935821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 2945821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 2955821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles):-webkit-any(.checkbox, .radio) label input ~ span { 2965821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-margin-start: 0.6em; 2975821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /* Make sure long spans wrap at the same horizontal position they start. */ 2985821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) display: block; 2995821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 3005821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 3015821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles):-webkit-any(.checkbox, .radio) label:hover { 3025821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) color: black; 3035821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 3045821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 3055821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)label > input:disabled:-webkit-any([type='checkbox'], [type='radio']) ~ span { 3065821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) color: #999; 3075821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 308