Hi,
I have a contact form which I have spiced up with CSS, but I am lost as to why my list is not using the same colours.
On the drop down list the background of the first box should be black and the selected box should be orange not blue as the border on the ones above.
Here is an image of the form http://malaga-aventura.com/images/list-css.gif
and the CSS code is:
Code:
/* form 2 */
#form2{
margin:1em 0;
color:#fff;
width:500px; /* customize width, this form have fluid layout */
}
#form2 h3{
margin:0;
background:#282828 url(../images/form2/form_heading.gif) repeat-x;
color:#fff;
font-size:20px;
border:1px solid #57a700;
border-bottom:none;
}
#form2 h3 span{
display:block;
padding:10px 20px;
background:url(../images/form2/form_ico.gif) no-repeat 93% 50%;
}
#form2 fieldset{
margin:0;
padding:0;
border:none;
border-top:3px solid #20252B;
background:#20252B url(../images/form2/form_top.gif) repeat-x;
padding-bottom:1em;
}
#form2 legend{display:none;}
#form2 p{margin:.5em 20px;}
#form2 label{display:block;}
#form2 input, #form2 textarea{
width:272px;
border:1px solid #FD6601;
background:#000 url(../images/form2/form_input.gif) repeat-x;
padding:5px 3px;
color:#fff;
}
.list{width:272px;
border:1px solid #FD6601;
background:#000 url(../images/form2/form_input.gif) repeat-x;
padding:5px 3px;
color:#fff;
}
#form2 textarea{
height:125px;
overflow:auto;
width:500px;
}
#form2 p.submit{
text-align:right;
}
#form2 button{
padding:0 20px;
height:32px;
line-height:32px;
border:1px solid #70ad2e;
background:#5aae00 url(../images/form2/form_button.gif) repeat-x;
color:#fff;
cursor:pointer;
text-align:center;
}
/* // form 2 */
Pleas help!
|