Re: [css-d] PROBLEM with CSS for checkbox - Firefox

[Philippe Wittenbergh]

> On Jun 23, 2017, at 5:28 AM, Karl DeSaulniers  wrote:
> 
> @Phillippe -
> I can't find the source where I found the unset now, but did find this note 
> on developer.mozilla which may be why the other site didn't list "none" and 
> why none did not work for the OP. I could be wrong.

But `-moz-appearance:none` *did* work for Bill (the OP). The thing that 
surprised him was a change in Firefox 54. Prior to that, setting 
`-moz-appearance:none` on a radio-button or checkbox would remove the native 
look-and-feel, but leave the border + checkmark visible (something that could 
not be styled). Starting with Firefox 54, setting `-moz-appearance:none` (or 
`unset`, it gives the same results), the border and checkmark thingie are also 
removed, just as it does in Webkit + Blink, allowing the stylesheet author to 
fully style the widget.

Have  a look at the test case I posted earlier in the thread:
https://dev.l-c-n.com/_temp/srbc.html

screenshots:
Firefox 52: https://dev.l-c-n.com/_b/Firefox-52.png
Firefox 54: https://dev.l-c-n.com/_b/Firefox-54.png

> Source: https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance
> 
> [ Note: If you wish to use this property on websites, you should test it very 
> carefully — it is non-standard, and historically its behavior has changed 
> from one browser to another. In older browsers even the keyword none does not 
> have the same behavior on each form element across different browsers, and 
> some do not support it at all. The differences are smaller in the newest 
> browsers. ]

Yes there are difference between Webkit / Blink on one side and Firefox on the 
other for all values except one: `none` (and even then, see above…), but  
`unset` returns the same issues as `none`.

BTW - the CSS spec only lists two possible values for the `appearance` 
property: auto  or none, with auto meaning “it’s up to the UA”.

https://drafts.csswg.org/css-ui-4/#propdef-appearance

Philippe
--
Philippe Wittenbergh
https://l-c-n.com/






__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] PROBLEM with CSS for checkbox - Firefox

[Karl DeSaulniers]

@Mi B,
Just saw this reply. 

The use of !important would do the trick just fine I guess from my tests, but I 
choose to use the unset so 
I didn't have to put !important on everything. background, borders, text, 
shadows, etc.
Also, I hate using !important, so it was also a personal choice.

@Phillippe -
I can't find the source where I found the unset now, but did find this note on 
developer.mozilla which may be why the other site didn't list "none" and why 
none did not work for the OP. I could be wrong.

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance

[ Note: If you wish to use this property on websites, you should test it very 
carefully — it is non-standard, and historically its behavior has changed from 
one browser to another. In older browsers even the keyword none does not have 
the same behavior on each form element across different browsers, and some do 
not support it at all. The differences are smaller in the newest browsers. ]


Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com




> On Jun 20, 2017, at 5:41 AM, Mi B  wrote:
> 
>> 
>> 20 juni 2017 kl. 12:05 skrev Karl DeSaulniers :
>> 
>> I chose to go with -*-appearance: unset; because I am able to turn it back 
>> on say on an individual page.
>> With !important, I have to override and override and override and can't just 
>> simply remove the !important.
>> Well, not that I have found. 
>> 
>> Is there a way to remove original !important statements from an element 
>> without using !important?
>> Heck, even with jQuery you have to override with !important. Just messy IMO.
>> 
>> 
>>> On Jun 20, 2017, at 4:09 AM, Philip Taylor (RHBNC)  
>>> wrote:
>>> 
>>> Karl DeSaulniers wrote:
 Hi Philip,
 At the time I didn't think to use !important (I try to avoid like the 
 plague) but yes,
 putting the !important let my borders and shading work without using 
 -webkit-appearance:unset;
>>> Excellent news.  I completely agree with you that one should eschew 
>>> !important as a matter of course, but I think that if all else fails it can 
>>> be worth a try.
>>> Philip Taylor
> 
> 
> I don’t really understand why a using a higher specificity isn’t the best 
> tool in this context. Is there a specific reason this won’t work? My 
> apologies if this have already been covered.
> __



__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] PROBLEM with CSS for checkbox - Firefox

[Philippe Wittenbergh]

> On Jun 21, 2017, at 7:24 AM, Philippe Wittenbergh  wrote:
> 
> 
>> On Jun 21, 2017, at 6:36 AM, Karl DeSaulniers  wrote:
>> 
>> Again, I didn't see a -webkit-appearance:none in the specs. I may have 
>> looked right past it. Not sure.
> 
> Which spec did you look at?
> 
> https://drafts.csswg.org/css-ui-4/#propdef-appearance
> 
> Value:auto | none
> 
> the global keywords inherit | initial | unset are a given for every property, 
> defined in CSS cascade [1]
> 
> 
> [1] https://drafts.csswg.org/css-cascade-3/#defaulting
>https://drafts.csswg.org/css-values-3/#common-keywords

I forgot to dd the official Webkit list:

https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-_webkit_appearance

> button, button-bevel, caret, checkbox, default-button, listbox, list item, 
> media-fullscreen-button, media-mute-button, media-play-button, 
> media-seek-back-button, media-seek-forward-button, media-slider, 
> media-sliderthumb, menu list, menulist-button, menulist-text, 
> menulist-textfield, none, push-button, radio, search field, 
> searchfield-cancel-button, searchfield-decoration, 
> searchfield-results-button, searchfield-results-decoration, 
> slider-horizontal, slider-vertical, sliderthumb-horizontal, 
> sliderthumb-vertical, square-button, textarea, textfield

(`none` highlighted)

Philippe
--
Philippe Wittenbergh
https://l-c-n.com/






__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] PROBLEM with CSS for checkbox - Firefox

[Philippe Wittenbergh]

> On Jun 21, 2017, at 6:36 AM, Karl DeSaulniers  wrote:
> 
> Again, I didn't see a -webkit-appearance:none in the specs. I may have looked 
> right past it. Not sure.

Which spec did you look at?

https://drafts.csswg.org/css-ui-4/#propdef-appearance

Value:  auto | none

the global keywords inherit | initial | unset are a given for every property, 
defined in CSS cascade [1]


[1] https://drafts.csswg.org/css-cascade-3/#defaulting
https://drafts.csswg.org/css-values-3/#common-keywords

Philippe
--
Philippe Wittenbergh
https://l-c-n.com/






__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] PROBLEM with CSS for checkbox - Firefox

[Karl DeSaulniers]

My replies within yours below.

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com




> On Jun 20, 2017, at 7:17 AM, Philippe Wittenbergh  wrote:
> 
> 
>> On Jun 20, 2017, at 7:05 PM, Karl DeSaulniers  wrote:
>> 
>> I chose to go with -*-appearance: unset; because I am able to turn it back 
>> on say on an individual page.
>> With !important, I have to override and override and override and can't just 
>> simply remove the !important.
>> Well, not that I have found. 
>> 
>> Is there a way to remove original !important statements from an element 
>> without using !important?
> 
> 1. Did you know that for input[submit] or [button] you can completely remove 
> the native appearance by simply specifying a gradient-image as background - 
> no need for -webkit-appearance:none; ? At least on iOS 8-9-10 not sure about 
> Android blink based browsers. No need for !important.
> 
> [type="submit"] { background: linear-gradient(#ccc,#ccc); }
> 
> That doesn’t fully work for select radio-buttons or checkboxes unfortunately 
> ( the gradient is there but there is still the native texture).

I have a gradient for my input[submit] input[reset] and input[button] and it 
did not completely remove the native appearance for my purpose.
The borders and the shape still stayed. Safari was putting 
-webkit-appearance:buttonface on mine and that didn't look too good.
So when I saw that it was applying -webkit-appearance, I looked into how to 
remove and 
came up with -webkit-appearance:unset (I didn't see a setting for 
-webkit-appearnace:none in the spec).
This removed the shape, background, borders and anything else set by 
-webkit-appearance and allowed me full access.
(I was making a submit button with one side round an the other square)

> 
> 2. You _can_ override the !important by upping the specificity
> 
> E { property: value !important}
> body E { property: other-value !important}

This is exactly what I want to avoid.

> 
> 3. For form controls, I vastly prefer using the appearance property, as it 
> clearly indicates what you are doing (intent: remove the native 
> look-and-feel) and it avoids using !important. Using 'none' or 'unset' is up 
> to you, the end result is the same, and * the computed value is the same in 
> both cases *: *-appearance: none.

Again, I didn't see a -webkit-appearance:none in the specs. I may have looked 
right past it. Not sure.

> 
> 4. While reviewing some of my form-controls snippets yesterday, I noticed 
> that Edge (at least v15, but probably older as well) fully recognises the 
> -webkit-appearance property – and it works the same as with Safari / Blink.

Well that is good to know. Thank you.

> 
> 5. On the subject of Edge (and IE 11):
> - select widgets: https://msdn.microsoft.com/library/Hh771821
> - radio / checkbox: https://msdn.microsoft.com/en-us/library/hh771816
> - input[type=file]:
>https://msdn.microsoft.com/en-us/library/windows/apps/hh779844.aspx
>https://msdn.microsoft.com/en-us/library/windows/apps/hh465820.aspx
> 
> Have fun with those.

I have NEVER had fun with IE... (: /)
But thanks for the links! (: ))

> 
> 
> Philippe
> --
> Philippe Wittenbergh
> https://l-c-n.com/


Best,
Karl
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] PROBLEM with CSS for checkbox - Firefox

[Philippe Wittenbergh]

> On Jun 20, 2017, at 7:05 PM, Karl DeSaulniers  wrote:
> 
> I chose to go with -*-appearance: unset; because I am able to turn it back on 
> say on an individual page.
> With !important, I have to override and override and override and can't just 
> simply remove the !important.
> Well, not that I have found. 
> 
> Is there a way to remove original !important statements from an element 
> without using !important?

1. Did you know that for input[submit] or [button] you can completely remove 
the native appearance by simply specifying a gradient-image as background - no 
need for -webkit-appearance:none; ? At least on iOS 8-9-10 not sure about 
Android blink based browsers. No need for !important.

[type="submit"] { background: linear-gradient(#ccc,#ccc); }

That doesn’t fully work for select radio-buttons or checkboxes unfortunately ( 
the gradient is there but there is still the native texture).

2. You _can_ override the !important by upping the specificity

E { property: value !important}
body E { property: other-value !important}

3. For form controls, I vastly prefer using the appearance property, as it 
clearly indicates what you are doing (intent: remove the native look-and-feel) 
and it avoids using !important. Using 'none' or 'unset' is up to you, the end 
result is the same, and * the computed value is the same in both cases *: 
*-appearance: none.

4. While reviewing some of my form-controls snippets yesterday, I noticed that 
Edge (at least v15, but probably older as well) fully recognises the 
-webkit-appearance property – and it works the same as with Safari / Blink.

5. On the subject of Edge (and IE 11):
- select widgets: https://msdn.microsoft.com/library/Hh771821
- radio / checkbox: https://msdn.microsoft.com/en-us/library/hh771816
- input[type=file]:
https://msdn.microsoft.com/en-us/library/windows/apps/hh779844.aspx
https://msdn.microsoft.com/en-us/library/windows/apps/hh465820.aspx

Have fun with those.


Philippe
--
Philippe Wittenbergh
https://l-c-n.com/






__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] PROBLEM with CSS for checkbox - Firefox

[william drescher]

On 6/18/2017 9:21 AM, Philippe Wittenbergh wrote:



On Jun 18, 2017, at 7:56 PM, william drescher  wrote:

The original problem was that firefox sized the radio buttones and checkboxes 
very small and ignored the
"html {font-size 2.2 rem}" for them.
I am writing this for an intranet and ff is the only browser supported. I 
haven't had time to try the suggested fixes.


here is a test page…
https://dev.l-c-n.com/_temp/srbc.html

The checkbox uses a SVG file as background image. Feel free to 
steal/borrow/reuse/…

But I was wrong to originally suggest using the [checked] attribute. That never 
matches when the checkbox / radio is toggled. I should have suggested using the 
 `:checked` pseudo-class instead.

Philippe


Thanks Philippe
When/If I understand the source I will use this.  I really like 
the way it looks.


bill

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] PROBLEM with CSS for checkbox - Firefox

[Mi B]

> 20 juni 2017 kl. 12:05 skrev Karl DeSaulniers :
> 
> I chose to go with -*-appearance: unset; because I am able to turn it back on 
> say on an individual page.
> With !important, I have to override and override and override and can't just 
> simply remove the !important.
> Well, not that I have found. 
> 
> Is there a way to remove original !important statements from an element 
> without using !important?
> Heck, even with jQuery you have to override with !important. Just messy IMO.
> 
> 
>> On Jun 20, 2017, at 4:09 AM, Philip Taylor (RHBNC)  
>> wrote:
>> 
>> Karl DeSaulniers wrote:
>>> Hi Philip,
>>> At the time I didn't think to use !important (I try to avoid like the 
>>> plague) but yes,
>>> putting the !important let my borders and shading work without using 
>>> -webkit-appearance:unset;
>> Excellent news.  I completely agree with you that one should eschew 
>> !important as a matter of course, but I think that if all else fails it can 
>> be worth a try.
>> Philip Taylor


I don’t really understand why a using a higher specificity isn’t the best tool 
in this context. Is there a specific reason this won’t work? My apologies if 
this have already been covered.
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] PROBLEM with CSS for checkbox - Firefox

[Karl DeSaulniers]

I chose to go with -*-appearance: unset; because I am able to turn it back on 
say on an individual page.
With !important, I have to override and override and override and can't just 
simply remove the !important.
Well, not that I have found. 

Is there a way to remove original !important statements from an element without 
using !important?
Heck, even with jQuery you have to override with !important. Just messy IMO.

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com




> On Jun 20, 2017, at 4:09 AM, Philip Taylor (RHBNC)  
> wrote:
> 
> Karl DeSaulniers wrote:
>> Hi Philip,
>> At the time I didn't think to use !important (I try to avoid like the 
>> plague) but yes,
>> putting the !important let my borders and shading work without using 
>> -webkit-appearance:unset;
> Excellent news.  I completely agree with you that one should eschew 
> !important as a matter of course, but I think that if all else fails it can 
> be worth a try.
> Philip Taylor

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] PROBLEM with CSS for checkbox - Firefox

[Philip Taylor (RHBNC)]

Karl DeSaulniers wrote:

Hi Philip,
At the time I didn't think to use !important (I try to avoid like the plague) 
but yes,
putting the !important let my borders and shading work without using 
-webkit-appearance:unset;
Excellent news.  I completely agree with you that one should eschew 
!important as a matter of course, but I think that if all else fails it 
can be worth a try.

Philip Taylor
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] PROBLEM with CSS for checkbox - Firefox

[Karl DeSaulniers]

Hi Philip,
At the time I didn't think to use !important (I try to avoid like the plague) 
but yes, 
putting the !important let my borders and shading work without using 
-webkit-appearance:unset;

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com




> On Jun 17, 2017, at 5:28 PM, Philip Taylor  wrote:
> 
> 
> 
> Karl DeSaulniers wrote:
>> Hi Phillipe,
>> Yes I have. I had to use it once when mobile phones were styling my submit 
>> buttons and not letting my style be applied.
>> It would allow the color, but not the appearance like borders and shading to 
>> be applied. 
>> Once I added the -*-appearance: unset, it allowed my style to be applied 
>> including borders and shading.
> Did !important have any perceivable effect, Karl ?
> Philip Taylor

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] PROBLEM with CSS for checkbox - Firefox

[Philippe Wittenbergh]

> On Jun 18, 2017, at 7:56 PM, william drescher  wrote:
> 
> The original problem was that firefox sized the radio buttones and checkboxes 
> very small and ignored the
> "html {font-size 2.2 rem}" for them.
> I am writing this for an intranet and ff is the only browser supported. I 
> haven't had time to try the suggested fixes.

here is a test page…
https://dev.l-c-n.com/_temp/srbc.html

The checkbox uses a SVG file as background image. Feel free to 
steal/borrow/reuse/…

But I was wrong to originally suggest using the [checked] attribute. That never 
matches when the checkbox / radio is toggled. I should have suggested using the 
 `:checked` pseudo-class instead.

Philippe
--
Philippe Wittenbergh
https://l-c-n.com/






__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] PROBLEM with CSS for checkbox - Firefox

[william drescher]

On 6/17/2017 6:48 PM, Philippe Wittenbergh wrote:



On Jun 18, 2017, at 6:53 AM, Karl DeSaulniers  wrote:

Yes I have. I had to use it once when mobile phones were styling my submit 
buttons and not letting my style be applied.
It would allow the color, but not the appearance like borders and shading to be 
applied.
Once I added the -*-appearance: unset, it allowed my style to be applied 
including borders and shading.


IOW - you did the same as what appearance:none does. And it would not allow the 
author styling of border / background of radio buttons and checkboxes in 
Firefox older than 54, even when using !important.

It also does _not_ help for radio buttons and checkbox on Mobile Safari (it 
does for input[type=button|submit]).

FWIW, the problem the OP has is that, starting with Firefox 54, his checkboxes 
and radio buttons lost their borders, and the indicator for the checked state. 
But he does want to remove the native look-and-feel.

Philippe
--
Philippe Wittenbergh
https://l-c-n.com/



The original problem was that firefox sized the radio buttones 
and checkboxes very small and ignored the

"html {font-size 2.2 rem}" for them.
I am writing this for an intranet and ff is the only browser 
supported. I haven't had time to try the suggested fixes.


bill


__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] PROBLEM with CSS for checkbox - Firefox

[Philippe Wittenbergh]

> On Jun 18, 2017, at 6:53 AM, Karl DeSaulniers  wrote:
> 
> Yes I have. I had to use it once when mobile phones were styling my submit 
> buttons and not letting my style be applied.
> It would allow the color, but not the appearance like borders and shading to 
> be applied. 
> Once I added the -*-appearance: unset, it allowed my style to be applied 
> including borders and shading.

IOW - you did the same as what appearance:none does. And it would not allow the 
author styling of border / background of radio buttons and checkboxes in 
Firefox older than 54, even when using !important.

It also does _not_ help for radio buttons and checkbox on Mobile Safari (it 
does for input[type=button|submit]).

FWIW, the problem the OP has is that, starting with Firefox 54, his checkboxes 
and radio buttons lost their borders, and the indicator for the checked state. 
But he does want to remove the native look-and-feel.

Philippe
--
Philippe Wittenbergh
https://l-c-n.com/






__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] PROBLEM with CSS for checkbox - Firefox

[Philip Taylor]

Karl DeSaulniers wrote:
> Hi Phillipe,
> Yes I have. I had to use it once when mobile phones were styling my submit 
> buttons and not letting my style be applied.
> It would allow the color, but not the appearance like borders and shading to 
> be applied. 
> Once I added the -*-appearance: unset, it allowed my style to be applied 
> including borders and shading.
Did !important have any perceivable effect, Karl ?
Philip Taylor
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] PROBLEM with CSS for checkbox - Firefox

[Karl DeSaulniers]

Hi Phillipe,
Yes I have. I had to use it once when mobile phones were styling my submit 
buttons and not letting my style be applied.
It would allow the color, but not the appearance like borders and shading to be 
applied. 
Once I added the -*-appearance: unset, it allowed my style to be applied 
including borders and shading.

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com




> On Jun 16, 2017, at 8:38 PM, Philippe Wittenbergh  wrote:
> 
> 
>> On Jun 17, 2017, at 9:08 AM, Karl DeSaulniers  wrote:
>> 
>> Basically you told the browser your checkboxes and radios have no appearance.
>> I think what your wanting is to "unset" the native appearance so you can 
>> apply your own?
>> 
>> That would be:
>> 
>> -moz-appearance: unset;
>> -webkit-appearance: unset;
>> -khtml-appearance: unset;
>> -o-appearance: unset;
>> 
>> I believe..
> 
> Have you tried that?
> It would remove the checkbox/radio “look” anyway, and it won’t give borders, 
> nor give any appearance for the checked state. Have a look using the 
> developper tools of your choice, and check the cascade…
> 
> Using type=checkbox as an example
> For Safari + Blink, the UA stylesheet says:
> -webkit-appearance: checkbox;
> border-style: initial; /* that means: no border, as the root html does not 
> specify any border style. */
> 
> For Firefox:
> -moz—appearance: checkbox;
> border-style: unset;
> 
> So, it will give exactly the same result, different of what Firefox 53 did 
> (which only removed the platform specific “look” when the -moz-appearance: 
> checkbox; is specified).
> 
> Philippe
> --
> Philippe Wittenbergh
> https://l-c-n.com/
> 
> 
> 
> 
> 
> 

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] PROBLEM with CSS for checkbox - Firefox

[Philippe Wittenbergh]

> On Jun 17, 2017, at 9:08 AM, Karl DeSaulniers  wrote:
> 
> Basically you told the browser your checkboxes and radios have no appearance.
> I think what your wanting is to "unset" the native appearance so you can 
> apply your own?
> 
> That would be:
> 
> -moz-appearance: unset;
> -webkit-appearance: unset;
> -khtml-appearance: unset;
> -o-appearance: unset;
> 
> I believe..

Have you tried that?
It would remove the checkbox/radio “look” anyway, and it won’t give borders, 
nor give any appearance for the checked state. Have a look using the developper 
tools of your choice, and check the cascade…

Using type=checkbox as an example
For Safari + Blink, the UA stylesheet says:
-webkit-appearance: checkbox;
border-style: initial; /* that means: no border, as the root html does not 
specify any border style. */

For Firefox:
-moz—appearance: checkbox;
border-style: unset;

So, it will give exactly the same result, different of what Firefox 53 did 
(which only removed the platform specific “look” when the -moz-appearance: 
checkbox; is specified).

Philippe
--
Philippe Wittenbergh
https://l-c-n.com/






__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] PROBLEM with CSS for checkbox - Firefox

[Philippe Wittenbergh]

> On Jun 17, 2017, at 3:58 AM, william drescher  wrote:
> 
> I have:
> 
> 
> 
> 
> 
> Since the most recent update of Firefox the checkboxes and radio buttons no 
> longer show (but the outline does) and when clicked the checkbox/radio still 
> don't show, but the receiving program acts as if it has received the checked 
> box/radio

That is kinda intended, in order to allow full styling of those widgets [1]. 
Your options are:
* remove the -moz-appearance: none; (but I guess the result of that is not what 
you want)
* style the widgets yourself,

[type="checkbox"], [type="radio"] {
   -moz-appearance:none;
   height: 1rem;
   outline: 2px dotted red;
   width: 1rem;

   border: 2px solid /* <—— add */
}

[type="checkbox"][checked] { position: relative}
[type="checkbox"][checked]::before {
  content: '✓';
  line-height:1;
  font-family: monospace;
  position: absolute;
  top:50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}

(that gives some results in my copy of FX running on macOS)

or simpler, create a background image for the checked state





[1] https://bugzilla.mozilla.org/show_bug.cgi?id=605985
 https://developer.mozilla.org/en-US/Firefox/Releases/54
https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance

Philippe
--
Philippe Wittenbergh
https://l-c-n.com/






__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] PROBLEM with CSS for checkbox - Firefox

[Karl DeSaulniers]

Basically you told the browser your checkboxes and radios have no appearance.
I think what your wanting is to "unset" the native appearance so you can apply 
your own?

That would be:

-moz-appearance: unset;
-webkit-appearance: unset;
-khtml-appearance: unset;
-o-appearance: unset;

I believe..

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com




> On Jun 16, 2017, at 1:58 PM, william drescher  wrote:
> 
> I have:
> 
> 
> 
> 
> 
> Since the most recent update of Firefox the checkboxes and radio buttons no 
> longer show (but the outline does) and when clicked the checkbox/radio still 
> don't show, but the receiving program acts as if it has received the checked 
> box/radio
> 
> Thoughts?
> 
> -bill
> 
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] PROBLEM with CSS for checkbox - Firefox

[Jeff Zeitlin]

What, exactly, is 

 -moz-appearance: none; 

_documented_ as doing for the version of FireFox you are using?



On Fri, 16 Jun 2017 14:58:20 -0400, william drescher
 wrote:

>Date: Fri, 16 Jun 2017 14:58:20 -0400
>
>I have:
>
>
>
>
>
>Since the most recent update of Firefox the checkboxes and radio 
>buttons no longer show (but the outline does) and when clicked 
>the checkbox/radio still don't show, but the receiving program 
>acts as if it has received the checked box/radio
>
>Thoughts?
>
>-bill
>
>__
>css-discuss [css-d@lists.css-discuss.org]
>http://www.css-discuss.org/mailman/listinfo/css-d
>List wiki/FAQ -- http://css-discuss.incutio.com/
>List policies -- http://css-discuss.org/policies.html
>Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] PROBLEM with CSS for checkbox - Firefox

[Tom Livingston]

A link would be of more help. Test page?



On Fri, Jun 16, 2017 at 2:58 PM, william drescher
 wrote:
> I have:
> 
> 
> 
> 
>
> Since the most recent update of Firefox the checkboxes and radio buttons no
> longer show (but the outline does) and when clicked the checkbox/radio still
> don't show, but the receiving program acts as if it has received the checked
> box/radio
>
> Thoughts?
>
> -bill
>
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/



-- 

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/