Inside checkbox colors

[Eustace]

Since I prefer accessibility colors (white on dark background), I have
added in Stylish a user style for Input fields colors (white text,
background black when not in focus, deep red when in focus).

In a website, however, the problem is with the checkboxes, that have
black background, but you can't see the check sign since it's also
black. What line should I add to the user style to change checkboxes'
colors?

I tried adding this simple code to see what, if anything, would happen:

checkbox {
color: yellow !important;
background-color: red !important;
}

It did not affect the webpage, but it turned the background of the area
outside - not the inside of the square - the checkboxes of the PrefBar
red and the legends yellow, not what I intended.

Thanks,

emf

--
It ain't THAT, babe! - A radical reinterpretation
https://files.nyu.edu/emf202/public/bd/itaintmebabe.html

[Eustace]

On 2012-08-16 12:46 Sailfish wrote:
> My bloviated meandering follows what Eustace graced us with on 8/16/2012
> 3:43 AM:

>> Since I prefer accessibility colors (white on dark background), I have
>> added in Stylish a user style for Input fields colors (white text,
>> background black when not in focus, deep red when in focus).
>>
>> In a website, however, the problem is with the checkboxes, that have
>> black background, but you can't see the check sign since it's also
>> black. What line should I add to the user style to change checkboxes'
>> colors?
>>
>> I tried adding this simple code to see what, if anything, would happen:
>>
>> checkbox {
>> color: yellow !important;
>> background-color: red !important;
>> }
>>
>> It did not affect the webpage, but it turned the background of the
>> area outside - not the inside of the square - the checkboxes of the
>> PrefBar red and the legends yellow, not what I intended.
>>

> Try:
>
> checkbox image {
> -moz-appearance: none !important;
> background-color: red !important;
> }

Thanks. But what about the color of the check sign itself? Also, how can
I make it use the system colors?

[»Q«]

For webpages, try

@namespace url(http://www.w3.org/1999/xhtml);

input[type="checkbox"] {
-moz-appearance: none !important;
color: yellow !important;
background-color: black !important;
}
input[type="checkbox"]:focus {
background-color: darkred !important;
}

In Stylish, make sure you use the html namespace, so you're affecting
web pages, as opposed to browser UI such as toolbars. Sylish has an
"insert" dropdown list with the namespace.

> Also, how can I make it use the system colors?

Sorry, I have no idea. Hope Sailfish or somebody else can advise.

[Eustace]

Unfortunately I do not see any effect with this code. The problem seems
to be that we are dealing with images, not text, as Sailfish writes.

> In Stylish, make sure you use the html namespace, so you're affecting
> web pages, as opposed to browser UI such as toolbars.

I didn't know this. I added the @namespace above to the code, however
the website address field and the Search field in the navigation toolbar
still have the same focus and unfocus colors I have specified in the
code, just mentioning it, not that I mind that.

Sylish has an
> "insert" dropdown list with the namespace.

Where is it? I haven't seen it.

>> Also, how can I make it use the system colors?
>
> Sorry, I have no idea. Hope Sailfish or somebody else can advise.

Thanks,

[»Q«]

On Fri, 17 Aug 2012 09:03:11 -0400

Maybe so, but the code works for me. Sailfish certainly knows more
than I do about this, though.

> > In Stylish, make sure you use the html namespace, so you're
> > affecting web pages, as opposed to browser UI such as toolbars.
>
> I didn't know this. I added the @namespace above to the code, however
> the website address field and the Search field in the navigation
> toolbar still have the same focus and unfocus colors I have specified
> in the code, just mentioning it, not that I mind that.
>
> Sylish has an
> > "insert" dropdown list with the namespace.
>
> Where is it? I haven't seen it.

It's toward the upper left in this screenshot -- I've highlighted it in
pinkish red: <http://remarqs.net/misc/stylish.png>.

The screenshot also shows that that style is working on for me to
affect web page checkboxes. They are to the right, behind the stylish
window, a bit hard to see against the page's white background.

The fact that, for you, the style is affecting the navigation bar and
the search field instead of web pages seems to indicate that something
is wrong with the namespace, but I can't say what.

[Eustace]

On 2012-08-18 03:39 Sailfish wrote:
> My bloviated meandering follows what »Q« graced us with on 8/17/2012
> 8:04 PM:

> I think you are both right ... just about different things. Your style
> overrides work on the inside box color but Eustace's (I took AIT
> training at Ft. Eustace, any relation? :) last inquiry had to do with
> the color of the check mark itself.
>
> [snip /]

Yes, but in Q's screenshot the checks inside the checkboxes are yellow.
I suspect that the his may affect some checkboxes and not others,
depending on the code of the webpage; unfortunately it does not affect
the checkboxes of the page I wanted to.

emf

--
Spherical Triangle Calculator - updated daily!
https://files.nyu.edu/emf202/public/js/spherical.html

[Eustace]

I added the namespace in the following code:

====================
@namespace url(http://www.w3.org/1999/xhtml);

input:not([type="submit"]):not([type="reset"]):not([type="clear"]):not([type="button"]),
textarea {
background-color: black !important; /* #0000AA */
color: white !important;
}

input:not([type="submit"]):not([type="reset"]):not([type="clear"]):not([type="button"]):focus,
textarea:focus {
background-color: #500 !important;
color: white !important;
}
====================

Note that the color of a textarea when in focus becomes dark red. Well,
if I click Preview and then click in either the Name textfield, or the
Tabs textfield, or the Find textfield, or the location textfield in the
browser, they become dark red, as before adding the namespace...

[»Q«]

On Sat, 18 Aug 2012 12:07:23 -0700
Sailfish <REMOVECAP...@REMOVECAPSunforgettable.com> wrote:

> My bloviated meandering follows what Eustace graced us with on

> 8/18/2012 7:21 AM:

> His "yellow" style override (color: yellow !important;) only affects
> text color, not images. As for the yellow checks, my guess is that
> this is a custom theme he's using?

Default theme, but it's the GNU/Linux theme, not Windows.

For me, the color attribute gets applied to them if and only if I
also apply "-moz-appearance: none".

[»Q«]

On Sat, 18 Aug 2012 14:54:52 -0700
Sailfish <REMOVECAP...@REMOVECAPSunforgettable.com> wrote:

> My bloviated meandering follows what »Q« graced us with on 8/18/2012
> 1:01 PM:
>
> [snip /]

> >
> > Default theme, but it's the GNU/Linux theme, not Windows.
> >
> > For me, the color attribute gets applied to them if and only if I
> > also apply "-moz-appearance: none".
>

> Wild, I checked the default theme in both the SUSE and Ubuntu Linux
> distros (I don't have GNU/Linux) and it's displayed as an image in
> them. Also, if the "color" property is changing the color of a
> graphics element then it seems like a bug, see
> http://www.w3.org/TR/CSS2/colors.html#propdef-color

I'm not clear on everything -moz-appearance does (and I haven't gone
searching MDN for documentation), but ISTM it changes the styling of
checkboxes so that when it's on, a graphic is used for the check, but
when it's turned off, the check is text.

[»Q«]

On Sat, 18 Aug 2012 10:28:12 -0400

In the case where the namespace is added later, I'm not sure how
Stylish decides whether to apply it to the browser UI or to web pages.
I always put the namespace in first when creating a new style, and it
always gets applied to the right thing. (Well, assuming I don't screw
up the CSS itself. ;)

Before there was Stylish, there were two separate files to use,
userContent.css for web pages and userContent.css for browser UI.
Stylish handles the distinction automagically, and I'm not sure how or
how to troubleshoot it.

[Sailfish]

My bloviated meandering follows what »Q« graced us with on 8/18/2012

5:52 PM:

Actually, it just informs Firefox to use the system styles for an
element, in this case, checkbox. Turning it off just means that one can
style the element the way they want in terms of borders, background, &c.


--
Sailfish - Netscape Champion
Mozilla Contributor Member - www.mozilla.org/credits/
Netscape/Mozilla Tips: http://www.ufaq.org/ , http://ilias.ca/
Rare Mozilla Stuff: https://www.projectit.com/

[»Q«]

On Sat, 18 Aug 2012 20:55:31 -0700

Sailfish <REMOVECAP...@REMOVECAPSunforgettable.com> wrote:

> My bloviated meandering follows what »Q« graced us with on 8/18/2012

> 5:52 PM:

> > I'm not clear on everything -moz-appearance does (and I haven't gone
> > searching MDN for documentation), but ISTM it changes the styling of
> > checkboxes so that when it's on, a graphic is used for the check,
> > but when it's turned off, the check is text.
>
> Actually, it just informs Firefox to use the system styles for an
> element, in this case, checkbox. Turning it off just means that one
> can style the element the way they want in terms of borders,
> background, &c.

Yes, that's why I expect setting it to "none" to get rid of the graphics
you're talking about. ;) It does in Windows as well (and it's easier
for me to see the background graphic than in my bland gtk theme for
Linux). The background graphics match the system theme. I got to a
Windows 7 machine and took some screenshots.

With the default "-moz-appearance: checkbox", bg images apparent:
<http://remarqs.net/misc/win7checkstyle.png>

With "-moz-appearance: none", no bg images:
<http://remarqs.net/misc/win7checkunstyled.png>

With the image gone and the text and bg colors changed:
<http://remarqs.net/misc/win7checkrestyle.png>

I don't think this is a bug, but rather intended, and it's what I
expect. But I don't understand why it works for me but not for Eustace,
who still doesn't have her problem solved. :(

[Eustace]

his :)

problem solved. :(

From what you say, the only explanation I can see is that the code does
not work for Win XP. I just tried it again. I added your code again to
Stylish, and opened my new program

https://files.nyu.edu/emf202/public/js/spherical.html

The check is white and the checkbox square is blue - the colors of my
system - white on blue.

Here are 4 screenshots:

https://files.nyu.edu/emf202/public/temp/checkbox1.gif
The spherical.html with the FF colors (black on white) and without the
System colors. The checkbox is white on black.

https://files.nyu.edu/emf202/public/temp/checkbox2.gif
The same with System colors (white on blue). The checkbox again is white
on black.

I omit the problem page with its own color (check black, checkbox white).

https://files.nyu.edu/emf202/public/temp/checkbox3.gif
The problem page with System colors. The checkbox is black, and any
checks in them are also black (invisible). (BTW, note also the black
square at the top (before and after emf202.)

https://files.nyu.edu/emf202/public/temp/checkbox4.gif
Another page of the same site with System colors. The checkbox at the
bottom is white on black (like in checkbox2 (however the squares before
and after emf202 are like in checkbox3.)

Since I prefer to use light on dark colors, I have a checkbox on the
Prefbar so I can change easily the colors of the webpages, (Note also
that the checkboxes in the prefbar are white on blue).

Clearly the problem has to do with the fact that developers write code
without considering the possibility that some people may use different
colors.

emf

--
Date Calculator with all-purpose JS code
https://files.nyu.edu/emf202/public/js/dateCalculator.html

[»Q«]

On Wed, 22 Aug 2012 00:41:56 -0700
Sailfish <REMOVECAP...@REMOVECAPSunforgettable.com> wrote:

> My bloviated meandering follows what »Q« graced us with on 8/19/2012
> 6:10 PM:

> > I got to a Windows 7 machine and took some screenshots.
> >
> > With the default "-moz-appearance: checkbox", bg images apparent:
> > <http://remarqs.net/misc/win7checkstyle.png>
> >
> > With "-moz-appearance: none", no bg images:
> > <http://remarqs.net/misc/win7checkunstyled.png>

> > With the image gone and the text and bg colors changed:
> > <http://remarqs.net/misc/win7checkrestyle.png>
>

> The only thing that makes sense as to why the color changes your
> checkmark is because the checkmark on your distro isn't an image but,
> rather, some font "check" symbol. This is guesswork on my part since
> I don't have your Linux distro to test it with.

I think you read that one too fast -- those are all Windows 7
screenshots, default Firefox theme.

If I get time over the weekend, I'll see what I get with an Ubuntu
livecd or a SuSE one.

[Eustace]

I think the reason for the checkboxes are white on black is because I
have this code in Stylish:

input:not([type="submit"]):not([type="reset"]):not([type="clear"]):not([type="button"]),
textarea {
background-color: black !important;

color: white !important;
}

which for some reason does not apply to the problem page.

emf

> I omit the problem page with its own color (check black, checkbox white).
>
> https://files.nyu.edu/emf202/public/temp/checkbox3.gif
> The problem page with System colors. The checkbox is black, and any
> checks in them are also black (invisible). (BTW, note also the black
> square at the top (before and after emf202.)
>
> https://files.nyu.edu/emf202/public/temp/checkbox4.gif
> Another page of the same site with System colors. The checkbox at the
> bottom is white on black (like in checkbox2 (however the squares before
> and after emf202 are like in checkbox3.)
>
> Since I prefer to use light on dark colors, I have a checkbox on the
> Prefbar so I can change easily the colors of the webpages, (Note also
> that the checkboxes in the prefbar are white on blue).
>
> Clearly the problem has to do with the fact that developers write code
> without considering the possibility that some people may use different
> colors.
>
> emf




--

[»Q«]

On Wed, 22 Aug 2012 16:22:03 -0700
Sailfish <REMOVECAP...@REMOVECAPSunforgettable.com> wrote:

> Bottom line, the Stylish override should work on content pages but
> not on chrome XUL elements.

Yeah, we're on the same page now. :)

Stylish will do whatever can be done with userChrome.css or with
userContent.css, but it's not capable of replacing those xul elements
as far as I know.

I don't know why you couldn't replicate my results when you used
userContent.css for it but could when you used Stylish. I'll play
around with it if I get a chance (and if I remember) but I've gotta put
this on a far back burner for now.

[»Q«]

On Thu, 23 Aug 2012 02:42:05 -0400
Eustace <emf...@gmail.com> wrote:

> I think the reason for the checkboxes are white on black is because I
> have this code in Stylish:
>
> input:not([type="submit"]):not([type="reset"]):not([type="clear"]):not([type="button"]),
> textarea {
> background-color: black !important;
> color: white !important;
> }

Yep, that's definitely why they're white-on-black.

> which for some reason does not apply to the problem page.

It seems to me the checkboxes on the problem page must not actually
(technically) be input elements, then. If you can view the source of
the problem page and try to cut-and-paste the part that has the
checkboxes, maybe we can figure something out for them.

[»Q«]

On Thu, 23 Aug 2012 17:58:09 -0500
»Q« <box...@gmx.net> wrote:

> I don't know why you couldn't replicate my results when you used
> userContent.css for it but could when you used Stylish. I'll play
> around with it if I get a chance (and if I remember) but I've gotta
> put this on a far back burner for now.

Well, it didn't take long for me to stop working and start
procrastinating by looking into it, heh.

The reason it doesn't work with userContent.css is because of
several !important declarations in Firefox's inbuilt forms.css. Older
versions of Stylish couldn't override them either, but obviously now
Stylish can override them.

The !important declarations in forms.css date back to c. 2000-2001.
They're there because at that time (and even now for all I know) the
CSS specs had nothing to say about styling form input elements, so
there wasn't any "correct" way to handle author styles. Letting
author styles override user-agent styles was resulting in input
elements which were invisible in some cases, and that problem was bad
enough for Firefox devs to decide to violate the general principle that
author styles should override user-agent styles. A side-effect is that
user styles can't override them either (without Stylish, anyway).

[Eustace]

On 2012-08-23 19:04 »Q« wrote:
> On Thu, 23 Aug 2012 02:42:05 -0400
> Eustace <emf...@gmail.com> wrote:
>
>> I think the reason for the checkboxes are white on black is because I
>> have this code in Stylish:
>>
>> input:not([type="submit"]):not([type="reset"]):not([type="clear"]):not([type="button"]),
>> textarea {
>> background-color: black !important;
>> color: white !important;
>> }
>
> Yep, that's definitely why they're white-on-black.

Hmm... It might be a good idea to exclude the checkboxes from the rule,
that was basically made for input text and textarea. I suppose I only
have to add

:not([type="checkbox"])

right?

>> which for some reason does not apply to the problem page.
>
> It seems to me the checkboxes on the problem page must not actually
> (technically) be input elements, then. If you can view the source of
> the problem page and try to cut-and-paste the part that has the
> checkboxes, maybe we can figure something out for them.

Impossible. The code contains a log of javascript, but searching for
"input" it only contains one <input type="text...> and a few <input
type="hidden"... >. Forget it.

emf

--
Spherical Triangle Calculator

https://files.nyu.edu/emf202/public/js/spherical.html