-moz-appearance not beinh honored Topic is solved

[JAB Creations]

On my web platform, JAB Creations, I have fairly extensive support to reduce the need for web designers to use rendering engine prefixes. While testing JavaScript browser version detection support I noticed that the checkbox for the authentication form was being pushed to the right. I have the actual checkbox elements hidden and replaced with a simply clean and fully customizable pseudo-element. Unfortunately even after adding explicit support for the Goanna rendering engine the checkbox's -moz-appearance is still not being honored resulting in the pseudo-element being pushed to the right.

Here is a screenshot of the bugged rendering:


It's near the top of the sidebar on the right side of the screen here:
https://www.jabcreations.com/

Is this a bug in the browser?

[Moonchild]

I think there's a problem with your document structure there.
For the name and password, you have the <label> as a sibling to the input field.
For the checkbox, you have the input inside the label element; you probably want to pull the input field out of there and make it a sibling as well.

[JAB Creations]

I think there's a problem with your document structure there.
For the name and password, you have the <label> as a sibling to the input field.
For the checkbox, you have the input inside the label element; you probably want to pull the input field out of there and make it a sibling as well.

The XML element placement is fine. Can you please tell me what is the deal with -moz-appearance not working on the <input type="checkbox" /> element?

[Moonchild]

It works just fine.

-moz-appearance:none

appnone.png

-moz-appearance:auto

appauto.png

The problem you seem to have it that you expect -moz-appearance:none for it to collapse, but that is not what none means in this context. none means it will use its standardized primitive appearance instead of a platform-native or operating system specific appearance, so it can be styled - but you're not otherwise styling it to collapse (instead just making it transparent with opacity) and as a result the element still takes space to the left of the visual elements you're using. I could go on about how your setup is rather fragile and using a number of hacks on top of hacks to achieve the display you seem to want, but that's irrelevant here.

[Kris_88]

the checkbox's -moz-appearance is still not being honored resulting in the pseudo-element being pushed to the right.

You need to explicitly specify "width:0px", and for that to work you also need to specify "-moz-appearance: none;" (otherwise "width:0px" won't work). Although, in fact, the width does not become 0, but decreases to 4 pixels, I don’t know why...

[Kris_88]

"-moz-appearance: checkbox-container; width: 0px;" hides the checkbox completely.

[JAB Creations]

"-moz-appearance: checkbox-container; width: 0px;" hides the checkbox completely.

That worked, thanks. I had to do some research because the accepted/working value changed with some versions of Firefox and Pale Moon 33.7.

[Kris_88]

I had to do some research because the accepted/working value changed with some versions of Firefox and Pale Moon 33.7.

It seems that display:none does not prevent the form field from being submitted in modern browsers. Why not use this direct method?

[JAB Creations]

It seems that display:none does not prevent the form field from being submitted in modern browsers. Why not use this direct method?

Probably because I'm building an entire web platform and have a lot on my plate. I'll add it to my to-do list to look in to it for tomorrow. Thank you for the friendly suggestion.

[Kris_88]

In general, yes, there might be a problem...
https://stackoverflow.com/questions/831 ... ne-element