Hi,

 

I use this code to create really tidy forms but I can't work out how to style a drop down selection box (what is the proper name for one of them?). The code I use just ignores the style I try to create and gives me the default browser style.

 

Any advice please:

 

HTML example:

 

<form method="post" action="quoterequest.php"> 
 <fieldset> 
 <legend>Quotation form:</legend> 
      <p> 
     <label for="EmailFrom">Name:</label> 
          <input type="text" name="EmailFrom" class="txt" > 
   </p> 
   <p> 
     <label for="email">Email Address:</label> 
     <input type="text" name="emailaddress" class="txt"> 
   </p> 
   <p> 
     <label for="telephone">Telephone:</label> 
     <input type="text" name="telephone" class="txt"> 
   </p> 
   <p> 
     <label for="marque">Vehicle make:</label> 
     <input type="text" name="marque" class="txt"> 
   </p> 
   <p> 
     <label for="model">Vehicle model:</label> 
     <input type="text" name="model" class="txt"> 
   </p> 
   <p> 
     <label for="year">Year:</label> 
     <input type="text" name="year" class="txt"> 
   </p> 
   <p>
 <label for="fuel">Fueltype:</label>
Petrol
<input type="checkbox" name="petrol" value="Yes"> 
Diesel 
<input type="checkbox" name="diesel" value="No"><br /> 
</p> 

   <p> 
<label for="enquiry">Details of any other work required:</label> 
<textarea name="enquiry"></textarea> 
</p> 
  <br /> 
<p>
 <label for="comments">Preferred contact method:</label>
Please telephone me 
<input type="checkbox" name="contactbyemail" value="Yes"> 
Please email me: 
<input type="checkbox" name="contactbyemail" value="Yes"><br /> 
</p> 
<p></p> 
<p>
<label for="comments">       </label>
<input type="submit" value="Submit" /> <input type="reset" value="Reset" /></p> 
     </fieldset> 
 </form> 

 

And the CSS:

input.txt {

font: bold 0.9em Arial, Helvetica, sans-serif;

color: #3C7ABE;

background-color:#FFFFD2;

border: 1px inset #3C7ABE;

width: 350px;

height: 22px;

}

textarea{

font: bold 0.9em Arial, Helvetica, sans-serif;

color: #3C7ABE;

width: 350px;

height: 120px;

background-color:#FFFFD2;

border: 1px inset #3C7ABE;

}

select{

font: bold 0.9em Arial, Helvetica, sans-serif;

color: #3C7ABE;

width: 350px;

height: 120px;

background-color:#FFFFD2;

border: 1px inset #3C7ABE;

}

form p {

clear: left;

margin: 0;

padding: 0;

padding-top: 8px;

}

form p label {

float: left;

width: 36%;

font: bold 0.9em Arial, Helvetica, sans-serif;

line-height: 18px;

}

fieldset {

border: 1px dotted #61B5CF;

margin-top: 4px;

padding: 4px;

}

legend {

font-family: Arial, Helvetica, sans-serif;

font-size: 1.4em;

font-style: normal;

color:#3C7ABE;

}[code]

You've got a style for select but I can't see any markup for a select box.

 

Do the styles for input and textarea work? They should work.

Hi Wickham,

 

yes everything else works fine. I just can't get away from the browser default drop down boxes!!

 

Thanks.