Image label for input not clickable in IE11

Image label for input not clickable in IE11

 

I have a radio button group, for every option button I have a flag to select one of them. I have a label containing this flag image and set  for=”radioButtonId” as given below:

 

Image Label For Input Not Clickable


<label>
    <input type="checkbox"> some text
    <img src="http://placeimg.com/100/100/any" alt="some img">
</label>

But Its working cool in Chrome/ Firefox and IE so where is it not working??

Here goes the appreciation for IE developers. The selection works perfect in IE9-10 but for some good reason(I dont know what good reason that may be) in IE11 they have disabled this functionality. So now Image Label for Input not working in IE11.

How To Make Image Label Click-able In IE11

The solution to this weird issue is a simple css rule (two actually) :


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

You may like to play with a proper ready made fiddle

Advertisements

Say something : I accept all the "Humer&Critic"

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s