textarea ... background-color:transparent causing problem in IE7

**dsdsdsdsd** · 03-13-2010 07:56 AM

hello;

when I use <textarea style="background-color:transparent " > IE7 does not accept input ... other browsers work fine;

is there a way to get a transparent background for a textarea such that the textarea functions correctly in IE7 ( I haven't tested it in IE8 )?

thanks,

Shannon

**tirna** · 03-13-2010 06:20 PM

as a workaround for IE7 maybe try wrapping the <textarea> in a <div> with a background-color:transparent and then set the

textarea background-color to 'inherit'.

This should hopefully force the textarea to use the background-color of its parent element. I haven't tested it though.

<textarea style="background-color:transparent " > works ok in IE8

**dsdsdsdsd** · 03-14-2010 03:39 AM

Tirna, thanks for your response;

I am getting some different results from you ... my IE8 ( vista ) behaves the same as my IE7 ( xp ) ... when the backgrounds are transparent the textareas do not accept input;

I tried the div wrapper approach ... oddly my IE7 did not recognize the background-color : inherit, but Mozilla3.5 did;

for now I will use a browser sniff and disable the effect on IE's;

thanks for your time.

**tirna** · 03-14-2010 03:52 AM

no problem.

For what it's worth below is the html I used to test textarea transparency in IE8.

I am running IE8 on Windows Vista Home Premium.

As it is, you will get a green textarea with white verical scroll bar.

I haven't tested it on IE7 which is on my laptop.

Code:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>

<style type="text/css">
body {
background-color: green}
textarea {
background-color: transparent }
</style>
</head>
<body>
<textarea cols="20" rows="10"></textarea>
</body>
</html>

**dsdsdsdsd** · 03-14-2010 06:47 AM

odd .. this works fine ... I need to figure out why this is working and mine is not ... thanks for your time ... Shannon

**dsdsdsdsd** · 03-14-2010 09:13 AM

seems that if I am very careful and mouseclick the border of the textarea, that the textarea WILL receive focus ( IE7 ) ... which means that it is willing to work.

so I set my textarea with a bunch of whitespace ( colsXrows characters of it ) and now it receives focus, but of course I have to strip all the whitespace before a user can submit; plus this is very hackey;

**dsdsdsdsd** · 03-15-2010 10:07 AM

another better hack is to place a mousedown handler on a wrapper div ( that wraps the textarea ), and have it set focus on the textarea via .focus() method;

Thread: textarea ... background-color:transparent causing problem in IE7

Thread Tools

Display

textarea ... background-color:transparent causing problem in IE7

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions