Custom Checkbox / Radio design oddity

Question

Ok so I'm hoping by borrowing some other eyes maybe someone can point out my folly as I shake the rust off my css.

I created some custom Checkbox and Radio designs to use in a Windows Store App I'm working on (might also mention the UI framework is Ionic) :

jsFiddle here

Which work as expected in the JSFiddle example provided above, where you can see the original component radio and checkbox behind the new ones. They accept the click/touch as expected and everything is kosher.

However, when I put it into the app, then the output puts the actual component in the middle of the screen like shown below while the new radio/checkboxes render to the side like I would expect. So with the opacity:1 on them they render like this and only the right side original controls get touch/click input;

Which puts the actual hit area outside of the design and renders it pretty useless to it's purpose.

You might notice the first part of my css has the opacity at 1, but in reality it should be 0 so only the custom design displays.

.my-checkbox, .my-radio {
    opacity: 1;
    position: absolute;   
}

(keep in mind, Windows Store HTML Apps are basically subjected to being displayed in a mutated version of IE9)

So my question would be, why in the #$%& does it put the actual element in the middle of the screen? What am I missing here? I've played with the positions etc, and no joy so I must just be ready for the weekend but I'd gladly take a serving of humble pie to fix it.

Thanks for lending me your eyes. :)

Honeywell

How about setting display:none !important on the radio buttons? – Allianora

@Allianora on the windows store app device I lose the touch input and can't seem to interact with the radios/checkboxes as one would expect too using your suggestion. The display of the original Radio/Checkboxes like the image example I provided shows is intentional to show how they're rendering, in the Android simulator etc, it still renders to the side like that the same, but the new checkboxes/radios respond to touch/click, but on the windows store app they do not and you have to click the original Radios/Checkboxes to show the state change. – Honeywell

Interesting. My other thought is to set some properties on the containing <div> that holds your radio groups, such as a fixed width, to see if that affects the position of the original input element. Otherwise, if you're just trying to show the state change, perhaps Javascript is the way to go. – Allianora

@Allianora well it's not just for the state change, I need them to reliably behave like normal CheckBox/RadioButtons and get their checked states etc, but I need them bigger etc to fit into the design scheme and function reliably on a touch tablet as windows store app. – Honeywell

Answer 1

I am not sure how to test this in the Windows Store HTML but this does work in IE9. This is how I would go about hiding a native checkbox and radio button from the user without losing the functionality.

input[type=checkbox].my-checkbox,
input[type=radio].my-radio {
    opacity: 0;
    position: absolute;
    margin: 0;
    z-index: -1;
    width: 0;
    height: 0;
    overflow: hidden;
    left: 0;
    pointer-events: none;
}

I've added it to your JSFiddle here http://jsfiddle.net/936kj6q3/3/

Cheers

Morna

Moreover, to expand on this, you are basically making the input type=checkbox or input type=radio as small as possible without using display: none. Moreover, you are using the label element along with the for attribute to make anything within the label element act as the click area for the input element. This won't work if the label element does not have the for attribute or if the browser you are using to render this does not support the label for=inputId feature. – Morna

Yea, it's weird. So with your addition I still get the same result in that it doesn't recognize the user action of click/touch. the for= attrib is supported and it's really strange considering it works as expected everywhere EXCEPT the windows store app webview. So still no love yet. – Honeywell