Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Hide radio button while keeping its functionality

Tags:

html

css

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.

like image 728
Matei Panchios Avatar asked Mar 30 '15 12:03

Matei Panchios


2 Answers

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

input[type=radio] {
  opacity: 0;
}
like image 157
Vishal Acharya Avatar answered Oct 19 '22 12:10

Vishal Acharya


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/

like image 30
phts Avatar answered Oct 19 '22 11:10

phts