Image Label for Input in a Form Not Clickable in Ie11

Image label for input in a form not clickable in IE11

One way to fix this is with pointer-events: none on the image, and adjusting the label with for example display: inline-block. (pointer-events is supported in IE11.)

label{
    display: inline-block;
}
label img{
    pointer-events: none;
}

(Demo at jsFiddle)

anchors and input fields not working in IE11

Your page works fine when IE11 is in IE10 emulation mode, and when you remove the z-index: -9999 from the body element set by main.css.

See https://stackoverflow.com/questions/21676600/ie11-negative-z-index

LABEL is not working in IE11 with TR , need to select the radio button on click of the row anywhere

You cannot enclose separate tr within a separate label. Try some script to achieve this.

function toggle_row(e, row_id) {

  e = e || window.event; //get event

  var el = e.srcElement || e.target; //get the right html element, on which user clicked

  var input = document.getElementById(row_id);//get the checkbox for the row clicked

  if (el != input) //checkbox was not clicked

    input.checked = !input.checked; //flip the checkbox selection

}

tr {

  cursor: pointer;

}

<table>

  <tr onclick="toggle_row(event,'row_1')">

    <td>

      <input type="checkbox" id="row_1" />

    </td>

    <td>Foo</td>

    <td>Bar</td>

  </tr>

  <tr onclick="toggle_row(event,'row_2')">

    <td>

      <input type="checkbox" id="row_2" />

    </td>

    <td>Foo</td>

    <td>Bar</td>

  </tr>

  <tr onclick="toggle_row(event,'row_3')">

    <td>

      <input type="checkbox" id="row_3" />

    </td>

    <td>Foo</td>

    <td>Bar</td>

  </tr>

</table>

IE 11 Bug - Image inside label inside form - Need to preserve mouse events

Did you try to set an id to the inputs and the for-attribute to the labels?

<label class="starRadioButton" for="rating4"><input type="radio" id="rating4" name="Rating" value="4" />

     <img title="Very Good" alt="4" class="starFour" src="~/Content/star-grey.png" /></label>

I believe IE is a bit stricter then others browser regarding labels/inputs.

If that not help, try to set an Id to your inputs and expand your click event listener with (as example) $("#rating4").attr("checked", true).

Checkbox image styling not working correctly within form on IE

This looks like a duplicate of another question: Image label for input in a form not clickable in IE

updated fiddle: https://jsfiddle.net/dnptmydo/

input[type="checkbox"][id^="cb"] {

  display: none;

}

label {

  border: none;

  padding: none;

  display: inline-block;

  position: relative;

  margin: none;

  /* cursor: pointer; */

}

label img {

  height: 125px;

  width: 125px;

  transition-duration: 0.2s;

  transform-origin: 50% 50%;

  pointer-events: none;

}

:checked + label img {

  transform: scale(1);

  box-shadow: 0 0 20px #ff0;

  z-index: -1;

}

<form>

 

    

 

     <input id="cb1" name="product1[]" type="checkbox" value=" Classic switch" />

     <label for="cb1">

      <img src="http://www.4jewelersonly.com/wp-content/uploads/sites/16/2015/03/127880648-670x670.jpg" alt="Sample Image" />

     </label>

   

     <input id="cb2" name="product2[]" type="checkbox" value=" Right angle switch" />

     <label for="cb2">

      <img src="http://www.4jewelersonly.com/wp-content/uploads/sites/16/2015/03/127880648-670x670.jpg" alt="Sample Image" />

     </label>

   

     <input id="cb3" name="product3[]" type="checkbox" value=" Adaptor" />

     <label for="cb3">

      <img src="http://www.4jewelersonly.com/wp-content/uploads/sites/16/2015/03/127880648-670x670.jpg" alt="Sample Image" />

     </label>

   

     <input id="cb4" name="product4[]" type="checkbox" value=" Blow switch" />

     <label for="cb4">

      <img src="http://www.4jewelersonly.com/wp-content/uploads/sites/16/2015/03/127880648-670x670.jpg" alt="Sample Image" />

     </label>

    

     <input id="cb5" name="product5[]" type="checkbox" value=" Cable" />

     <label for="cb5">

      <img src="http://www.4jewelersonly.com/wp-content/uploads/sites/16/2015/03/127880648-670x670.jpg" alt="Sample Image" />

     </label>

          </form>

IE 11 input not displaying typed text

It's hard to tell without seeing the CSS, however i encountered this issue a while back and fixed it by setting the height of the input box.

My theory is that IE didn't think there was enough height to show the text in the font size I had specified.

For example

<input type="text" id="example" style="height: 40px" /> 

I hope this helps.

---

Related Topics