Bug 1243353 - allow HTML in-content checkboxes to have focus and style them appropriately, r?jaws
--- a/toolkit/themes/linux/global/in-content/common.css
+++ b/toolkit/themes/linux/global/in-content/common.css
@@ -90,16 +90,23 @@ xul|*.numberbox-input-box {
border-width: 0;
}
xul|*.text-link:-moz-focusring,
xul|*.inline-link:-moz-focusring {
border: 1px dotted -moz-DialogText;
}
+xul|menulist:-moz-focusring > xul|*.menulist-label-box,
+xul|radio[focused="true"] > xul|*.radio-label-box,
+html|input[type="checkbox"]:-moz-focusring + html|label:before,
+xul|checkbox:-moz-focusring > xul|*.checkbox-label-box {
+ outline: 1px dotted;
+}
+
xul|spinbuttons {
-moz-appearance: none;
}
xul|treechildren::-moz-tree-row(multicol, odd) {
background-color: var(--in-content-box-background-odd);
}
--- a/toolkit/themes/osx/global/in-content/common.css
+++ b/toolkit/themes/osx/global/in-content/common.css
@@ -81,16 +81,17 @@ xul|*.inline-link:-moz-focusring {
color: var(--in-content-link-highlight);
text-decoration: underline;
box-shadow: none;
}
xul|button:-moz-focusring,
xul|menulist:-moz-focusring,
xul|checkbox:-moz-focusring > .checkbox-check,
+html|input[type="checkbox"]:-moz-focusring + html|label:before,
xul|radio[focused="true"] > .radio-check,
xul|tab:-moz-focusring > .tab-middle > .tab-text {
outline: 2px solid rgba(0,149,221,0.5);
outline-offset: 1px;
-moz-outline-radius: 2px;
}
xul|radio[focused="true"] > .radio-check {
--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -470,17 +470,18 @@ html|a:hover:active,
color: var(--in-content-link-color-active);
text-decoration: none;
}
/* Checkboxes and radio buttons */
/* Hide the actual checkbox */
html|input[type="checkbox"] {
- visibility: hidden;
+ opacity: 0;
+ width: 0;
position: absolute;
}
/* Create a box to style as the checkbox */
html|input[type="checkbox"] + html|label:before {
display: inline-block;
content: "";
vertical-align: middle;
--- a/toolkit/themes/windows/global/in-content/common.css
+++ b/toolkit/themes/windows/global/in-content/common.css
@@ -63,16 +63,17 @@ xul|*.radio-label-box,
xul|*.checkbox-label-box {
border-style: none;
}
xul|*.inline-link:-moz-focusring,
xul|button:-moz-focusring > xul|*.button-box,
xul|menulist:-moz-focusring > xul|*.menulist-label-box,
xul|radio[focused="true"] > xul|*.radio-label-box,
+html|input[type="checkbox"]:-moz-focusring + html|label:before,
xul|checkbox:-moz-focusring > xul|*.checkbox-label-box {
outline: 1px dotted;
}
/* Use a 2px border so that selected row highlight is still visible behind
an existing high-contrast border that uses the background color */
@media not all and (-moz-windows-default-theme) {
xul|treechildren::-moz-tree-row(selected),