/* Copyright (c) 2012 The Chromium Authors. All rights reserved. * Use of this source code is governed by a BSD-style license that can be * found in the LICENSE file. */ /* This file defines styles for form controls. The order of rule blocks is * important as there are some rules with equal specificity that rely on order * as a tiebreaker. These are marked with OVERRIDE. */ @import url(action_link.css); /* Default state **************************************************************/ :-webkit-any(button, input[type='button'], input[type='submit']):not(.custom-appearance), select, input[type='checkbox'], input[type='radio'] { -webkit-appearance: none; background-image: -webkit-linear-gradient(#ededed, #ededed 38%, #dedede); border: 1px solid rgba(0, 0, 0, 0.25); border-radius: 2px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.75); color: #444; font: inherit; margin: 0 1px 0 0; outline: none; text-shadow: 0 1px 0 rgb(240, 240, 240); user-select: none; } :-webkit-any(button, input[type='button'], input[type='submit']):not(.custom-appearance), select { min-height: 2em; min-width: 4em; padding-bottom: 1px; padding-top: 1px; } :-webkit-any(button, input[type='button'], input[type='submit']):not(.custom-appearance) { -webkit-padding-end: 10px; -webkit-padding-start: 10px; } select { -webkit-appearance: none; -webkit-padding-end: 24px; -webkit-padding-start: 10px; /* OVERRIDE */ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAICAQAAACxSAwfAAAAUklEQVQY02P4z0AMRGZGMaShwCisyhITmb8huMzfEhOxKvuvsGAh208Ik+3ngoX/FbBbClcIUcSAw21QhXxfIIrwKAMpfNsEUYRXGVCEFc6CQwBqq4CCCtU4VgAAAABJRU5ErkJggg==), -webkit-linear-gradient(#ededed, #ededed 38%, #dedede); background-position: right center; background-repeat: no-repeat; } html[dir='rtl'] select { background-position: center left; } input[type='checkbox'] { height: 13px; position: relative; vertical-align: middle; width: 13px; } input[type='radio'] { /* OVERRIDE */ border-radius: 100%; height: 15px; position: relative; vertical-align: middle; width: 15px; } /* TODO(estade): add more types here? */ input[type='number'], input[type='password'], input[type='search'], input[type='text'], input[type='url'], input:not([type]), textarea { border: 1px solid #bfbfbf; border-radius: 2px; box-sizing: border-box; color: #444; font: inherit; margin: 0; /* Use min-height to accommodate addditional padding for touch as needed. */ min-height: 2em; outline: none; padding: 3px; } input[type='search'] { -webkit-appearance: textfield; /* NOTE: Keep a relatively high min-width for this so we don't obscure the end * of the default text in relatively spacious languages (i.e. German). */ min-width: 160px; } /* Checked ********************************************************************/ input[type='checkbox']:checked::before { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAQAAAADpb+tAAAAaElEQVR4Xl3PIQoCQQCF4Y8JW42D1bDZ4iVEjDbxFpstYhC7eIVBZHkXFGw734sv/TqDQQ8Xb1udja/I8igeIm7Aygj2IpoKTGZnVRNxAHYi4iPiDlA9xX+aNQDFySziqDN6uSp6y7ofEMwZ05uUZRkAAAAASUVORK5CYII=); background-size: 100% 100%; content: ''; display: block; height: 100%; user-select: none; width: 100%; } input[type='radio']:checked::before { background-color: #666; border-radius: 100%; bottom: 3px; content: ''; display: block; left: 3px; position: absolute; right: 3px; top: 3px; } /* Hover **********************************************************************/ :enabled:hover:-webkit-any( select, input[type='checkbox'], input[type='radio'], :-webkit-any( button, input[type='button'], input[type='submit']):not(.custom-appearance)) { background-image: -webkit-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0); border-color: rgba(0, 0, 0, 0.3); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12), inset 0 1px 2px rgba(255, 255, 255, 0.95); color: black; } :enabled:hover:-webkit-any(select) { /* OVERRIDE */ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAICAQAAACxSAwfAAAAUklEQVQY02P4z0AMRGZGMaShwCisyhITmb8huMzfEhOxKvuvsGAh208Ik+3ngoX/FbBbClcIUcSAw21QhXxfIIrwKAMpfNsEUYRXGVCEFc6CQwBqq4CCCtU4VgAAAABJRU5ErkJggg==), -webkit-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0); } /* Active *********************************************************************/ :enabled:active:-webkit-any( select, input[type='checkbox'], input[type='radio'], :-webkit-any( button, input[type='button'], input[type='submit']):not(.custom-appearance)) { background-image: -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7); box-shadow: none; text-shadow: none; } :enabled:active:-webkit-any(select) { /* OVERRIDE */ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAICAQAAACxSAwfAAAAUklEQVQY02P4z0AMRGZGMaShwCisyhITmb8huMzfEhOxKvuvsGAh208Ik+3ngoX/FbBbClcIUcSAw21QhXxfIIrwKAMpfNsEUYRXGVCEFc6CQwBqq4CCCtU4VgAAAABJRU5ErkJggg==), -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7); } /* Disabled *******************************************************************/ :disabled:-webkit-any( button, input[type='button'], input[type='submit']):not(.custom-appearance), select:disabled { background-image: -webkit-linear-gradient(#f1f1f1, #f1f1f1 38%, #e6e6e6); border-color: rgba(80, 80, 80, 0.2); box-shadow: 0 1px 0 rgba(80, 80, 80, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.75); color: #aaa; } select:disabled { /* OVERRIDE */ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAICAQAAACxSAwfAAAASklEQVQY02P4z0AMRGZGMaShwCisyhITG/4jw8RErMr+KyxYiFC0YOF/BeyWIikEKWLA4Ta4QogiPMpACt82QRThVQYUYYWz4BAAGr6Ii6kEPacAAAAASUVORK5CYII=), -webkit-linear-gradient(#f1f1f1, #f1f1f1 38%, #e6e6e6); } input:disabled:-webkit-any([type='checkbox'], [type='radio']) { opacity: .75; } input:disabled:-webkit-any([type='password'], [type='search'], [type='text'], [type='url'], :not([type])) { color: #999; } /* Focus **********************************************************************/ :enabled:focus:-webkit-any( select, input[type='checkbox'], input[type='number'], input[type='password'], input[type='radio'], input[type='search'], input[type='text'], input[type='url'], input:not([type]), :-webkit-any( button, input[type='button'], input[type='submit']):not(.custom-appearance)) { /* We use border color because it follows the border radius (unlike outline). * This is particularly noticeable on mac. */ border-color: rgb(77, 144, 254); outline: none; /* OVERRIDE */ transition: border-color 200ms; } /* Checkbox/radio helpers ****************************************************** * * .checkbox and .radio classes wrap labels. Checkboxes and radios should use * these classes with the markup structure: * *