1 /* This Source Code Form is subject to the terms of the Mozilla Public
2 * License, v. 2.0. If a copy of the MPL was not distributed with this
3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
5 /* ===== checkbox.css ===================================================
6 == Styles used by the XUL checkbox element.
7 ======================================================================= */
9 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
11 /* ::::: checkbox ::::: */
14 -moz-box-align: center;
18 padding-inline-start: 2px;
19 padding-inline-end: 0;
23 border: 1px solid transparent;
28 margin-inline-end: 2px;
35 /* ..... focused state ..... */
37 checkbox:-moz-focusring > .checkbox-label-box {
38 border: 1px dotted #008484;
41 /* ..... disabled state ..... */
43 checkbox[disabled="true"] > .checkbox-check {
44 border: 1px solid #8050B0;
45 background-color: #000000;
48 checkbox[disabled="true"] > .checkbox-label-box {
52 /* ::::: checkmark image ::::: */
56 border: 1px solid #FF9F00;
61 background: #000000 no-repeat 50% 50%;
62 margin-inline-end: 3px;
65 checkbox:not([disabled="true"]):hover > .checkbox-check,
66 checkbox:not([disabled="true"]):hover:active > .checkbox-check {
67 border: 1px solid #FFCF00;
70 checkbox:not([disabled="true"]):hover > .checkbox-label-box,
71 checkbox:not([disabled="true"]):hover:active > .checkbox-label-box {
75 /* ..... checked state ..... */
77 checkbox[checked="true"] > .checkbox-check {
78 background-image: url("chrome://global/skin/checkbox/cbox-check.gif");
81 checkbox[checked="true"]:hover > .checkbox-check,
82 checkbox[checked="true"]:hover:active > .checkbox-check {
83 background-image: url("chrome://global/skin/checkbox/cbox-check-hover.gif");
86 checkbox[checked="true"][disabled="true"] .checkbox-check {
87 background-image: url("chrome://global/skin/checkbox/cbox-check-disabled.gif") !important;
90 /* ..... checkbox in groupbox caption ..... */
99 caption > checkbox:hover {
100 background-color: #FFCF00;
103 caption > checkbox:hover:active {
104 background-color: #FF9F00;
107 caption > checkbox:not([disabled="true"]) > .checkbox-label-box,
108 caption > checkbox:not([disabled="true"]):hover > .checkbox-label-box,
109 caption > checkbox:not([disabled="true"]):hover:active > .checkbox-label-box {
113 caption > checkbox:not([disabled="true"]) > .checkbox-check,
114 caption > checkbox:not([disabled="true"]):hover > .checkbox-check,
115 caption > checkbox:not([disabled="true"]):hover:active > .checkbox-check {
116 border-color: #000000;
119 caption > checkbox[checked="true"] > .checkbox-check,
120 caption > checkbox[checked="true"]:hover > .checkbox-check,
121 caption > checkbox[checked="true"]:hover:active > .checkbox-check {
122 background-image: url("chrome://global/skin/checkbox/cbox-check-inverted.gif");