Quick note: For those of you running IE8 (get firefox) and are wondering why you can’t click on your textboxes <input type=”text”>, the answer is the styling. IE8 seems to have a bug where if the background is set to transparent, the only clickable area is the border (if it’s visible). Setting the background of the textbox to a color fixes this problem.
How did MS miss this one??
–EDIT–
After trying to duplicate this issue (see comments), it looks like it was something specific to the site in question. Unfortunately, I can’t say which site it was, but if you do some digging around, I’m sure you can figure it out.
Something that I did notice (Seems to be IE specific), is when the background of a textbox (<input type=”text”>) is set to transparent, the cursor does not change to a text-input cursor unless the user hovers over the border. How ’bout THEM apples??
Thank you very much for helping me fixed this bug. I save my life….
oop I mean you save my life thank again!
Hey, bud, do you have a demo for this bug? I’m a bit confused of what you mean by “textbox”; I tried with both, and and I can click them just fine.
I notice that on your site, IE8 does not display a cursor when hovering the textarea in these “leave a reply” forms.
Let me know if you can get a hold of a demo.
Cheers
Ugh, your comment system stripps off the < and > characters and everything between them (BUG). What I meant to say is that I tried with both `textarea` and `input type=”text”` elements
Hey there, let me address your comments about this site first. The stripping of those symbols is a security feature, not a bug. Let WordPress developers know if you feel like it is the latter. This site is completely built on WordPress so all functionality, by default is that of WordPress.
As for IE8 not displaying a cursor when hovering over a textbox, thanks for pointing out another IE bug
. I’m sure it has to do with z-index and it could probably be resolved by manually setting the cursor in the CSS.
As for the click-through issue initially reported in this post, I do not have a demo because I wanted to fix it as soon as possible, but as you can see from another commenter, it’s an actual issue and not limited to just me and while it could be argued that the problem was initially caused by bad CSS development, this problem did not emerge until the release of IE8.
–edit
As for the subject of the post, “textbox” was in reference to input of type textbox. Otherwise, I would have said “textarea”
Know what I mean?
Thanks..saved my time.
Thank you very mutch!
Can some one throw more light on the reported problem or the possible solutions.
We do notice similar problem in one of our web application. That application uses iframe – and within the iframe a form with many texboxes is shown. And these texboxes do NOT have transparent background styling.
The problem happens only in few versions of IE8.
Any help will be appreciated.
Try adding this to the HEAD of the doc:
However, it being in an iFrame, not too sure how IE8 will handle that. I hate IE.
Even without the transparent styling, the problem sometimes appears when the border css style is set on the textbox. Do you control the content of iFrame? Can you manipulate that form?
@Gustavo
I am not able see the 2nd line of your post- what should be under the HEAD of the doc. Are you referring to meta tags?
We already tried adding the meta tag X-UA-Compatible to emulate IE7. It didn’t help. Still we see the strange behavior in few versions of the IE8.
And yes, we own the content of the iFrame too. It is coded by another team within our company. What type of manipulations we can do; please let me know.
An example (hope your comment system takes it):
And the solution is to set both transparent color and a transparent background image.
Also, have a look at http://stackoverflow.com/questions/2098714/input-boxes-with-transparent-background-are-not-clickable-in-ie8
[...] This post was mentioned on Twitter by Jiří Stránský. Jiří Stránský said: Právě jsem narazil s bugem v IE 8. Nejde kliknout do formulářových prvků s background: transparent. http://bit.ly/dlM6Sm #wtf [...]