Hide radio button while keeping its functionality

Question

I searched on SO and Google and I couldn't find anything related. Is there any way I can hide the radio button next to an image (that is used as a label for it) but still keep its functionality when clicking on the label?

I have tried several methods but it seems that using display:none or visibility:hidden makes the radio function useless.

Answer 1

In Angular, display:none or visibility:hidden didn't work for me. Instead, I used:

input[type=radio] {
  opacity: 0;
}

Answer 2

I have tried several methods but it seems that using display:none or visibility:hidden makes the radio function useless.

But it works. Maybe you didn't set for attribute:

<input id=radio1 name=testradios type=radio><label for=radio1>radio1</label>
<br>
<input id=radio2 name=testradios type=radio><label for=radio2>radio2</label>

#radio1 {
    display: none;
}

OR

#radio1 {
    visibility: hidden;
}

Both hide radio button but label is still clickable and checks its radiobutton.

http://jsfiddle.net/m0fbd75w/