CODEWITHSUNDEEP
htmlcss
Matei Panchios
Matei Panchios

Reputation: 333

Hide radio button while keeping its functionality

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.

Upvotes: 17

Views: 49719

Answers (4)

Vishal Acharya
Vishal Acharya

Reputation: 139

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

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

Upvotes: 11

Bazinga
Bazinga

Reputation: 11244

document.getElementById('myId').addEventListener('click', function() {
  alert(this.checked);
})
label {
  display: inline-block;
}
label:before {
  content: '';
  background: url('http://placehold.it/350x150') no-repeat;
  width: 30px;
  height: 30px;
  display: inline-block;
}
input {
  display: none;
}
<input type="radio" id="myId">
<label for="myId"></label>

Upvotes: 3

phts
phts

Reputation: 3925

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/

Upvotes: 11

Choxx
Choxx

Reputation: 945

Just cover them with another div whose color matched with the background. This will hide the radio buttons and still your radio buttons will work on clicks of their labels. Hope that helps..

Upvotes: 0

Related Questions