radio button size - Firefox for Android

Issue

I was testing the three-state radio button i've created.

The code is too long to post over here... Link to code: codepen

input {
    cursor: pointer;
    width: 4rem;
    height: 4rem;
    position: absolute;
    margin: 0;
    padding: 0;
    opacity: 0;
    z-index: 1;
}

As you can see, i've created three radio buttons: each of them is a square of a given size, and absolute positioned. In this way the user can click/tap any part of the control, and the toggle should move accordingly. This works well on desktop devices. On mobile, it works well on IE shipped with windows phone 8 devices, works good on Chrome for Android, but it's not working on Firefox for Android. If you change the input's opacity to 1, you'll see Firefox is going to apply the browser-default size to these controls, making impossible to these controls to cover the part they are assigned...

I'm testing it with CyanogenMod 11.0 (based on Android 4.4.4) on the Oneplus One.

Is it a bug? Is there a way to fix it?

Solution

You should style the <label> instead of the input. The label will select the radiobox you need. And your radiobox will be hidden.

html

<input type="radio" id="yes" />
<label for="yes">Yes</label>

css

input {
  visibility: hidden;
}

label {
  display: inline-block;
  height: 30px;
  width: 50px;
}

Answered By - alexmngn