Hello
I have created an HTML form and styled it using CSS. All works fine except for this one style:
input {
background-color: #EFEFEF;
}
It works in FF but not in IE. In IE it keeps the default yellow colour. Why is IE doing this and is there a way to get it to accept my chosen colours?

Thanks.

Let's have a URL where we can SEE it or post all of the html and css.

I don't think the default background-color for inputs is yellow, even in IE. You might have some other code on your site that's conflicting and confusing IE, but we'd have to see your site to know for sure.

Here is a link to the html test page:
http://www.rhowbustgraphics.co.uk/Rh...ontactform.htm

And the CSS:
@charset "utf-8";
/* CSS Document */

body
{
font-family: Verdana, Geneva, sans-serif;
color:#FFFFFF;
background:#000000;
margin: 0;
padding: 0;
text-align:center;
}

div.container
{
width: 785px;
Height: 490px;
margin: 0 auto;
margin-top:20px;
background-image:url(../images/Logo.png);
background-repeat:no-repeat;
border: 1px solid #CCCCCC;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
text-align: left;
}

div.header
{
height:68px;
Border-bottom:3px;
border-bottom-style:groove;
border-color:#CCCCCC;
}

div.left
{
float:left;
width:210px;
margin:0;
margin-top:70px;
margin-left:5px;
padding:5px;
}

div.content
{
margin:5px;
padding:40px 10px;
}

div.box
{
width: 530px;
height: 340px;
margin: 5px 30px 30px 230px;
padding: 1px;
background-image:url(../images/BoxBG2.png);
background-repeat:no-repeat;
}

div.box p,h1,h2,h3,h4,h5,h6,td,th
{
margin: 10px;
text-align:left;
padding-top:20px;
padding-right:20px;
}

div.form
{
width: 530px;
height: 298px;
margin: 40px 30px 30px 230px;
padding: 1px;
background-image:url(../images/BoxBG.png);
}

div.form p,h1,h2,h3,h4,h5,h6,td,th
{
color:#333333;
text-align:justify;
padding-left: 3px;
padding-right:10px;
}

div.galleryleft
{
float:left;
width:50px;
margin:0;
padding:5px;
}

div.gallerycontent
{
margin-left:300px;
padding:5px;
}

div.footer
{
height:30px;
width:785px;
margin: 0 auto;
padding-bottom:10px;
border: 1px solid #CCCCCC;
text-align: center;
}

a:link {
color:#CCCCCC;
text-decoration: none;
}
a:visited {
color: #CCCCCC;
text-decoration: none;
}
a:hover {
color:#FFCCFF;
text-decoration: none;
}
a:active {
color: #CCCCCC;
text-decoration: none;
}

a:link.box{
color:#000000;
text-decoration:underline;
}
a:visited.box{
color:#000000;
text-decoration:underline;
}
a:hover.box {
color:#FFCCFF;
text-decoration: none;
}
a:active.box{
color:#000000;
text-decoration:underline;
}

/* contact form css*/
.cflite {
width: 500px;

}
.cflite_td {

font-size:12px;
}
input {
background-color: #EFEFEF;
}
textarea {
background-color: #EFEFEF;
}
.cflite p {
padding:4px;
}
.cflite label {
padding:4px;
}
label {
padding-right:10px;

}
.required {
font-weight:normal;
}
.required_star {
font-weight:normal;
}
.not-required {
font-weight:normal
}


Any help much apprecieted.

Google toolbar (or anything else that autofills forms) can cause this, as it uses a yellow background to highlight input boxes which it detects as autofillable.

Adding !important to the style declaration should prevent it from being overridden.

input {
 background-color: #EFEFEF !important;
}

But maybe the issue should be whether you should prevent the highlighting - if users want to they can alter their own setttings. Users often get irritated by websites which seek to block their settings or make their choices for them.
As you are using black text, visibility isn't a problem against a yellow background, so personally I'd just leave it be.

That did the trick. Thank you! :-)