PROBLEM with CSS for checkbox - Firefox

classic Classic list List threaded Threaded
22 messages Options
12
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

PROBLEM with CSS for checkbox - Firefox

william drescher
I have:
<!DOCTYPE html>
<style type="text/css">
<!--
html {
     font-size: 2.2rem;
}
button, select, input, textarea {
     font-size: 1rem;
}
[type="checkbox"], [type="radio"] {
     -moz-appearance: none;
     height: 1rem;
     outline: 2px dotted red;
     width: 1rem;
}
-->
</style>

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 [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: 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
<[hidden email]> wrote:

> I have:
> <!DOCTYPE html>
> <style type="text/css">
> <!--
> html {
>     font-size: 2.2rem;
> }
> button, select, input, textarea {
>     font-size: 1rem;
> }
> [type="checkbox"], [type="radio"] {
>     -moz-appearance: none;
>     height: 1rem;
>     outline: 2px dotted red;
>     width: 1rem;
> }
> -->
> </style>
>
> 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 [[hidden email]]
> 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 [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: PROBLEM with CSS for checkbox - Firefox

Freelance Traveller
In reply to this post by william drescher
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
<[hidden email]> wrote:

>Date: Fri, 16 Jun 2017 14:58:20 -0400
>
>I have:
><!DOCTYPE html>
><style type="text/css">
><!--
>html {
>     font-size: 2.2rem;
>}
>button, select, input, textarea {
>     font-size: 1rem;
>}
>[type="checkbox"], [type="radio"] {
>     -moz-appearance: none;
>     height: 1rem;
>     outline: 2px dotted red;
>     width: 1rem;
>}
>-->
></style>
>
>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 [[hidden email]]
>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 [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: PROBLEM with CSS for checkbox - Firefox

Karl DeSaulniers
In reply to this post by william drescher
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 <[hidden email]> wrote:
>
> I have:
> <!DOCTYPE html>
> <style type="text/css">
> <!--
> html {
>    font-size: 2.2rem;
> }
> button, select, input, textarea {
>    font-size: 1rem;
> }
> [type="checkbox"], [type="radio"] {
>    -moz-appearance: none;
>    height: 1rem;
>    outline: 2px dotted red;
>    width: 1rem;
> }
> -->
> </style>
>
> 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 [[hidden email]]
> 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 [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: PROBLEM with CSS for checkbox - Firefox

Philippe Wittenbergh
In reply to this post by william drescher

> On Jun 17, 2017, at 3:58 AM, william drescher <[hidden email]> wrote:
>
> I have:
> <!DOCTYPE html>
> <style type="text/css">
> <!--
> html {
>    font-size: 2.2rem;
> }
> button, select, input, textarea {
>    font-size: 1rem;
> }
> [type="checkbox"], [type="radio"] {
>    -moz-appearance: none;
>    height: 1rem;
>    outline: 2px dotted red;
>    width: 1rem;
> }
> -->
> </style>
>
> 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 [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: PROBLEM with CSS for checkbox - Firefox

Philippe Wittenbergh
In reply to this post by Karl DeSaulniers

> On Jun 17, 2017, at 9:08 AM, Karl DeSaulniers <[hidden email]> 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 [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: 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 <[hidden email]> wrote:
>
>
>> On Jun 17, 2017, at 9:08 AM, Karl DeSaulniers <[hidden email]> 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 [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: PROBLEM with CSS for checkbox - Firefox

Philip Taylor (Webmaster, Ret'd)


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 [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: PROBLEM with CSS for checkbox - Firefox

Philippe Wittenbergh
In reply to this post by Karl DeSaulniers

> On Jun 18, 2017, at 6:53 AM, Karl DeSaulniers <[hidden email]> 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 [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: 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 <[hidden email]> 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 [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: PROBLEM with CSS for checkbox - Firefox

Philippe Wittenbergh

> On Jun 18, 2017, at 7:56 PM, william drescher <[hidden email]> 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 [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: PROBLEM with CSS for checkbox - Firefox

Karl DeSaulniers
In reply to this post by Philip Taylor (Webmaster, Ret'd)
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 <[hidden email]> 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 [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: PROBLEM with CSS for checkbox - Firefox

Philip Taylor (Webmaster, Ret'd)
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 [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: 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) <[hidden email]> 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 [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: PROBLEM with CSS for checkbox - Firefox

Mi B

> 20 juni 2017 kl. 12:05 skrev Karl DeSaulniers <[hidden email]>:
>
> 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) <[hidden email]> 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 [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: PROBLEM with CSS for checkbox - Firefox

william drescher
In reply to this post by Philippe Wittenbergh
On 6/18/2017 9:21 AM, Philippe Wittenbergh wrote:

>
>> On Jun 18, 2017, at 7:56 PM, william drescher <[hidden email]> 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 [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: PROBLEM with CSS for checkbox - Firefox

Philippe Wittenbergh
In reply to this post by Karl DeSaulniers

> On Jun 20, 2017, at 7:05 PM, Karl DeSaulniers <[hidden email]> 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 [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: 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 <[hidden email]> wrote:
>
>
>> On Jun 20, 2017, at 7:05 PM, Karl DeSaulniers <[hidden email]> 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 [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: PROBLEM with CSS for checkbox - Firefox

Philippe Wittenbergh

> On Jun 21, 2017, at 6:36 AM, Karl DeSaulniers <[hidden email]> 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 [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: PROBLEM with CSS for checkbox - Firefox

Philippe Wittenbergh

> On Jun 21, 2017, at 7:24 AM, Philippe Wittenbergh <[hidden email]> wrote:
>
>
>> On Jun 21, 2017, at 6:36 AM, Karl DeSaulniers <[hidden email]> 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 [[hidden email]]
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/
12
Loading...