question on how to style a select form

[michaelh613]

I have a <select> form that goes in front of a background image.

I am not sure how to style a form to do the following.
The size of the boxes and fonts of the form
Change the default arrow used by the form when selecting an item. I have an image I would like to use in its place. How do I do that.
Change the submit button to use an image but use css instead of a javascript submit.

Thanks for any help

form html is pretty standard

<form name="search" id="search" method="post" action="#">
  <fieldset>
   <div id="cruiseline">
    <select name="cruiseline">
       <option>Cruise Line</option>
       <option>Carnival</option>
     </select>
     </div>
    <div id ="month">
   <select name="month">
       <option>Month</option>
       <option>January</option>
       <option>February</option>
       <option>March</option>
       <option>April</option>
       <option>May</option>
       <option>June</option>
       <option>July</option>
       <option>August</option>
       <option>September</option>
       <option>October</option>
       <option>November</option>
       <option>December</option>
     </select> 
     </div>
     <div id="region">
     <select name="region">
       <option>Region</option>
       <option>Europe</option>
       <option>Asia</option>
     </select>
     </div>   
   </fieldset>
  </form>

[DrDoc]

Changing the "arrow" on your

select

dropdown is impossible. I am assuming you mean the

[v]

thing.

As for using an image -- simply use

<input type="image" src="foo.png">

for that.

[michaelh613]

Wierd because I know I've seen forms where it appears the arrow is not standard in the past. Could it be done with something besides css

Anyway how about changing the field sizes height width font of the select boxes

[jetboy]

You can achieve some <select> styling in niche browsers, but if you've seen something radically different, it'll have been JavaScript based.

Tom's Hardware uses a JavaScript <select> for its page navigation on articles, which is relatively pretty. That one doesn't use an actual <select> element as its basis, but there's little reason why you shouldn't code a basic <select> and use JavaScript to replace it once the DOM has loaded. All the bells and whistles without sacrificing the underlying code and the accessibility benefits that may do with it.

[michaelh613]

That may be the type of thing I need. I couldn't see it on their page. Do you know how you do t his type of change with javascript.

[michaelh613]

Interesting this works

<select style= "font-size: 8px" name="cruiseline">

but this does not

<select class="small" name="month">

.small {
font-size:8x;
}

Any ideas how I can move this into my style sheet?

[DrDoc]

.small {  
font-size:8x;  
}

You may want to add a "p" in there ;)

[michaelh613]

Feel free to kill me.

I ended up being able to get close to what I want with this

.searchform {
font-size:9px;
width:127px;
margin:0px;
padding:0px;
}