1

I have a text input:

<input id="csv-filename" type="text" name="csv-filename" placeholder="Select a CSV file">

I have placed a label above it for a different control:

<label id="trial-csv-label" for="trial-csv">Select a CSV file</label>

Both the input and the label have identical width, height, and positioning, and the label has a higher z-index and no opacity. This is a workaround for an IE bug, which is the only reason I've created such a monstrosity.

The problem I am having is that, in IE only, a click on any part of the label which does not have text clicks through to the underlying input. (Or possibly another way of putting this is that the width of the label does not seem to stretch the full width of the input, but if you give the label a bit of opacity and an outline you see that's not really the case and you can still click through on the non-text parts of the label.) This should not be happening.

I have attempted to stop propagation, but that is not working, and I don't believe this is a propagation issue anyway.

Any ideas?

4

1 回答 1

1

I have found this to be an IE issue that can be solved using a transparent image as the background, sometimes happens on links too.

note that I have also found that IE sometimes doesn't like the usual 1x1 transparent gif - if this happens then make it 50x50 and it should work

于 2013-07-23T08:00:12.613 回答