Welcome to WebmasterWorld Guest from 184.72.177.182

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)

New User

5+ Year Member

joined:Mar 18, 2008
posts: 23
votes: 0


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)

Senior Member

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

joined:Mar 15, 2002
posts:6807
votes: 0


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)

New User

5+ Year Member

joined:Mar 18, 2008
posts: 23
votes: 0


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)

Full Member

10+ Year Member

joined:Feb 14, 2005
posts: 266
votes: 0


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)

New User

5+ Year Member

joined:Mar 18, 2008
posts: 23
votes: 0


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)

New User

5+ Year Member

joined:Mar 18, 2008
posts: 23
votes: 0


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)

Senior Member

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

joined:Mar 15, 2002
posts:6807
votes: 0


.small {  
font-size:8x;
}

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

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

New User

5+ Year Member

joined:Mar 18, 2008
posts: 23
votes: 0


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