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. :)

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