Geek Answers Handbook

Hide switch while maintaining functionality

I searched for SO and Google, and I could not find anything related. Is there a way to hide the switch next to the image (which is used as a shortcut for it), but still keep its functionality when you click on the label?

I tried several methods, but it seems that using display:noneor visibility:hiddenmakes the radio function useless.

+4
source share
3 answers

Just cover them with another div whose color matches the background. This will hide the switches, and your radio buttons will work by clicking their labels. Hope this helps.

+1
source 

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>
Run codeHide result
+1
source

, , display: none visibility: hidden .

. , for:

<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 the radio button, but the tag is still clickable and checks its radio object.

http://jsfiddle.net/m0fbd75w/

0
source

More articles:


All Articles