+
+
+
+/* Hide the actual checkbox */
+input[type="checkbox"] {
+ opacity: 0;
+ width: 0;
+ pointer-events: none;
+ position: absolute;
+}
+
+/* Create a box to style as the checkbox */
+input[type="checkbox"] + span::before {
+ display: inline-block;
+ content: "";
+ vertical-align: -3px;
+}
+
+input[type="checkbox"] + span {
+ line-height: 0px;
+}
+
+input[type="checkbox"] + span::before {
+ -moz-appearance: none;
+ width: 1em;
+ height: 1em;
+ border-radius: 0;
+ border: 1px solid var(--theme-body-color);
+ margin-inline-end: 10px;
+ background-color: var(--theme-toolbar-background);
+ background-position: center center;
+ background-repeat: no-repeat;
+}
+
+input[type="checkbox"]:not(:disabled) + span:hover::before {
+ border-color: var(--theme-hover-background);
+}
+input[type="checkbox"]:not(:disabled) + span:hover {
+ color: var(--theme-hover-background);
+}
+input[type="checkbox"]:checked + span::before {
+ background-image: url("chrome://global/skin/in-content/check.svg#check");
+}
+
+input[type="checkbox"]:checked:disabled + span::before {
+ background-image: url("chrome://global/skin/in-content/check.svg#check-disabled");
+}
+input[type="checkbox"]:checked:not(:disabled) + span:hover::before {
+ background-image: url("chrome://global/skin/in-content/check.svg#check-hover");
+}
+input[type="checkbox"]:disabled + span::before {
+ border-color: var(--theme-body-color-inactive);
+}
+input[type="checkbox"]:disabled + span {
+ color: var(--theme-body-color-inactive);
+}
+
+select {
+ border: 1px solid var(--theme-body-color);
+ background-color: var(--theme-toolbar-background);
+ color: var(--theme-body-color);
+ background-image: url("chrome://global/skin/arrow/arrow-down.gif");
+ background-repeat: no-repeat;
+ background-position: calc(100% - 2px) center;
+ border-radius: 3px;
+ padding: 1px;
+ margin: 1px;
+ font: inherit;
+}
+select:hover {
+ background-color: var(--theme-hover-background);
+ color: var(--theme-hover-color);
+ background-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
+}
+select:hover:active {
+ background-color: var(--theme-active-background);
+ color: var(--theme-active-color);
+}