Welcome to WebmasterWorld Guest from 54.198.87.238

Forum Moderators: not2easy

Message Too Old, No Replies

question on how to style a select form

     
3:29 am on Aug 1, 2008 (gmt 0)

5+ Year Member



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>
4:58 am on Aug 1, 2008 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.
10:08 am on Aug 1, 2008 (gmt 0)

5+ Year Member



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

11:02 am on Aug 1, 2008 (gmt 0)

10+ Year Member



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.

2:45 pm on Aug 1, 2008 (gmt 0)

5+ Year Member



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.
3:23 pm on Aug 1, 2008 (gmt 0)

5+ Year Member



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?

3:53 pm on Aug 1, 2008 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



.small {  
font-size:8x;
}

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

8:14 pm on Aug 1, 2008 (gmt 0)

5+ Year Member



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;
}
 

Featured Threads

Hot Threads This Week

Hot Threads This Month