Hidden Radio Button But Box Around It in IE8

Hidden radio button but box around it in ie8

if you can use javascript:

<input onfocus="this.blur()" type="radio" id="btn" name="btn" style="opacity: 0;filter: alpha(opacity = 0);position:absolute;" />

IE - hidden radio button not checked when the corresponding label is clicked

It probably is to do with the display: none - you may also find that hidden elements don't get their values submitted with the rest of the form. If you have control over it, you may want to try positioning the elements off screen rather then hiding them.

Styling Radio buttons and Checkboxes in IE8

As you are not opposed to using JS, you might want to checkout http://selectivizr.com/. We have used this in several projects that require older browser support and functional custom style checkboxes/radios.

IE radio button hide not working

The issue with the code is it use the pseudo on the input element.

Pseudo element shouldn't work on single tag element, like input, img and so on, though Chrome let it anyway

If you set the pseudo on the label instead, it will work cross browser

div {

  padding: 5px 0;

}

input[type="radio"] {

  display: none;

}

input[type="radio"] + label::before {

  content: '';

  display: inline-block;

  width: 14px;

  height: 14px;

  margin: 0 8px -2px 0;

  cursor: pointer;

  border-radius: 50%;

  border: 1px solid gray;

}

input[type="radio"]:checked + label::before {

  background: #005eb8;

}

<div>

  <input type="radio" id="r1" name="rd">

  <label for="r1">Button 1</label>

</div>

<div>

  <input type="radio" id="r2" name="rd">

  <label for="r2">Button 2</label>

</div>

Why do my radio buttons all deselect when I hide a DIV in IE7?

See IE - hidden radio button not checked when the corresponding label is clicked -- sounds like hiding the elements offscreen instead of with display: none is going to be necessary if you want to support IE7 with this. So you'll probably have to rule out the jQuery UI tabs; they're using display:none & display:block. The good news is tab-like structures are very easy to write yourself with jQuery.

---

Related Topics