css hack n' slash, continued: New styles for checkboxes and radios.

chrome/browser/resources/shared/css/checkbox.css

Index: chrome/browser/resources/shared/css/checkbox.css
diff --git a/chrome/browser/resources/shared/css/checkbox.css b/chrome/browser/resources/shared/css/checkbox.css
index 479fbee0db5c6f24d847e649035af145b7697ed9..276ff6f85cdbee0253acf9da705fd0de3dcebe52 100644
--- a/chrome/browser/resources/shared/css/checkbox.css
+++ b/chrome/browser/resources/shared/css/checkbox.css
@@ -2,142 +2,4 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
-input[type='checkbox'],
-input[type='radio'] {
-  -webkit-box-shadow: inset 0 1px 2px white,
-                      0 1px 2px rgba(0, 0, 0, .2);
-  -webkit-appearance: none;
-  -webkit-margin-start: 0;
-  -webkit-margin-end: 3px;
-  background: -webkit-linear-gradient(#fafafa, #dcdcdc);
-  border: 1px solid #a0a0a0;
-  display: inline-block;
-  margin-bottom: 0;
-  margin-top: 0;
-  position: relative;
-}
 
-input[type='checkbox']:disabled,
-input[type='radio']:disabled {
-  opacity: .75;
-}
-
-input[type='checkbox'] {
-  border-radius: 3px;
-  height: 16px;
-  width: 16px;
-}
-
-input[type='checkbox']:not(:disabled):not(:active):hover,
-input[type='radio']:not(:disabled):not(:active):hover {
-  background: -webkit-linear-gradient(#fff, #e6e6e6);
-  text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
-}
-
-input[type='checkbox']:not(:disabled):active {
-  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
-  background: -webkit-linear-gradient(#f0f0f0, #bebebe);
-  border: 1px solid #808080;
-  text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
-}
-
-input[type='checkbox']:checked::before {
-  -webkit-user-select: none;
-  color: #808080;
-  content: url('../images/checkmark.png');
-  font-size: 13px;  /* Explicitly set the font size so that the positioning
-                       of the checkmark is correct. */
-  height: 16px;
-  left: 2px;
-  position: absolute;
-}
-
-input[type='radio'] {
-  border-radius: 100%;
-  height: 15px;
-  width: 15px;
-}
-
-input[type='radio']:not(:disabled):active {
-  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
-  background: -webkit-linear-gradient(#f0f0f0, #bebebe);
-  border: 1px solid #808080;
-  text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
-}
-
-input[type='radio']:checked::before {
-  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5);
-  -webkit-margin-start: 4px;
-  background: #808080;
-  border-radius: 10px;
-  content: '';
-  display: inline-block;
-  font-size: 13px;
-  font-weight: 400;
-  height: 5px;
-  left: 0;
-  margin-top: 4px;
-  opacity: 1;
-  position: absolute;
-  top: 0;
-  vertical-align: top;
-  width: 5px;
-}
-
-html[dir='rtl'] input[type='radio']:checked::before {
-  right: 0;
-}
-
-input[type='radio']:active:checked::before {
-  background: #606060;
-}
-
-/* .checkbox and .radio classes wrap labels. */
-
-.checkbox,
-.radio {
-  margin: 9px 0;
-}
-
-.checkbox label,
-.radio label {
-  /* Don't expand horizontally: http://crbug.com/112091 */
-  display: -webkit-inline-box;
-}
-
-.checkbox label input ~ span,
-.radio label input ~ span {
-  -webkit-margin-start: 0.4em;
-  /* Make sure long spans wrap at the same horizontal position they start. */
-  display: block;
-}
-
-input[type='checkbox']:not(.custom-appearance):focus,
-input[type='radio']:not(.custom-appearance):focus {
-  -webkit-box-shadow: inset 0 1px 2px white,
-      0 1px 2px rgba(0, 0, 0, .2),
-      0 0 1px #c0c0c0,
-      0 0 1px #c0c0c0,
-      0 0 1px #c0c0c0;
-  -webkit-transition: border-color 200ms;
-  border-color: rgb(64, 128, 250);
-  outline: none;
-}
-
-label > input[type=radio] ~ span,
-label > input[type=checkbox] ~ span,
-input[type=checkbox] ~ label {
-  color: #444;
-}
-
-label > input[type=checkbox]:disabled ~ span,
-label > input[type=radio]:disabled ~ span,
-input[type=checkbox]:disabled ~ label {
-  color: #888;
-}
-
-label:hover > input[type=checkbox]:not(:disabled) ~ span,
-label:hover > input[type=radio]:not(:disabled) ~ span,
-input[type=checkbox]:not(:disabled) ~ label:hover {
-  color: #222;
-}