Question

I have an input field that I want to set transparent, and then remove the transparency.

Step 1:

<div class="container" style="background: grey">
    <input id="firstName" type="text" value="Hello">
</div>​

Script:

$("#firstName").css("background", "transparent");

Now the background color of the input element is grey (container background color). So far so good in both IE+Chrome.

Step 2: I want to remove the “transparent” css property, so I attempt this:

$("#firstName").css("background", "");

This works in Chrome, as the background is set to white. In IE8, however, the input element’s background color remains grey. The above line simply doesn’t give any effect in IE8. Does anyone know how to acheive what I’m trying to do?

JSFiddle here with full code: http://jsfiddle.net/R24Ym/5/

Answer 1

If this is the only style you are applying, you can simply remove the style attribute:

$('#firstName').removeAttribute('style');

Otherwise, you can make a class called transparent and add and remove that:

$('#firstName').addClass('transparent');
$('#firstName').removeClass('transparent');

CSS:

.transparent{
    background:none transparent;
}

http://jsfiddle.net/R24Ym/7/