www.webdeveloper.com
Results 1 to 7 of 7

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

  1. #1
    Join Date
    May 2004
    Posts
    129

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

    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

  2. #2
    Join Date
    Mar 2010
    Posts
    2,803
    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

  3. #3
    Join Date
    May 2004
    Posts
    129
    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.

  4. #4
    Join Date
    Mar 2010
    Posts
    2,803
    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>

  5. #5
    Join Date
    May 2004
    Posts
    129
    odd .. this works fine ... I need to figure out why this is working and mine is not ... thanks for your time ... Shannon

  6. #6
    Join Date
    May 2004
    Posts
    129
    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;

  7. #7
    Join Date
    May 2004
    Posts
    129
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles