Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-19 08:15:31 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 418833 - Make non-native checkbox and radio input styles look right in Fennec. r=snorp

Browse Source 
<input>'s of type checkbox and radio are rendered as native widgets by default
on Desktop, but on Fennec, we fallback to using the built-in, non-native
checkboxes.

The earlier patches in this series made it possible for agent, user and page
stylesheets to make changes to the non-native checkbox and radio input fields.

Unfortunately, some of the default agent styles for those checkbox and radio
elements on Fennec were accidentally setting rules that they shouldn't. That
wasn't a problem before because the inputs couldn't be styled before. Now that
they can, we're failing a bunch of reftests because the inputs look wrong in
certain situations.

For example:

1) We were setting background: var(--form_background) for every radio and
   checkbox input. --form_background is just a colour though, and that meant
   that the rest of the background styles were being overwritten. This has
   been fixed by setting background-color: var(--form_background) instead.
   The same also applied to some usage of --form_background_disabled.

2) We were setting border-radius: var(--form_border_radius) on all input
   elements, but this was putting rounded corners on the checkbox and
   radio inputs as well. This rule has been modified to skip checkbox
   and radio inputs.

MozReview-Commit-ID: CnpTRXcCxoY

--HG--
extra : rebase_source : ee688b96270e9b2b3498f18d43f9430048b9b444
This commit is contained in:
Mike Conley 2016-11-10 20:46:46 -05:00
parent a4fdeba2e9
commit 9d00dd2f96
1 changed files with 14 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
mobile/android/themes/core/content.css
View File

@ -100,6 +100,12 @@ button,
xul|button,
* > input:not([type="image"]) {
-moz-appearance: none !important; /* See bug 598421 for fixing the platform */
}
textarea,
button,
xul|button,
* > input:not(:-moz-any([type="image"], [type="checkbox"], [type="radio"])) {
border-radius: var(--form_border_radius);
}
@ -107,7 +113,7 @@ select[size],
select[multiple],
select[size][multiple],
textarea,
* > input:not([type="image"]):not([type="image"]) {
* > input:not([type="image"]) {
border-style: solid;
border-color: var(--form_border);
color: var(--form_text);
@ -133,11 +139,11 @@ button {
}
input[type="checkbox"] {
background: var(--form_background);
background-color: var(--form_background);
}
input[type="radio"] {
background: var(--form_background)
background-color: var(--form_background)
}
select {
@ -233,11 +239,11 @@ input[type="radio"]:focus {
}
input[type="checkbox"]:focus {
background: var(--form_background);
background-color: var(--form_background);
}
input[type="radio"]:focus {
background: var(--form_background);
background-color: var(--form_background);
}
/* we need to be specific for selects because the above rules are specific too */
@ -256,13 +262,13 @@ button:disabled:active,
border-color: var(--form_border);
border-style: solid;
border-width: 1px;
background: var(--form_background_disabled);
background-color: var(--form_background_disabled);
}
select:not([size]):not([multiple]):disabled,
select[size="0"]:disabled,
select[size="1"]:disabled {
background: var(--form_background_disabled);
background-color: var(--form_background_disabled);
}
input[type="button"]:disabled,
@ -277,7 +283,7 @@ button:disabled:active {
padding-inline-end: 7px;
padding-block-start: 0;
padding-block-end: 0;
background: var(--form_background_disabled);
background-color: var(--form_background_disabled);
}
input[type="radio"]:disabled,