homepage Welcome to WebmasterWorld Guest from 54.227.56.174
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
question on how to style a select form
michaelh613




msg:3712646
 3:29 am on Aug 1, 2008 (gmt 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>

 

DrDoc




msg:3712670
 4:58 am on Aug 1, 2008 (gmt 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.

michaelh613




msg:3712776
 10:08 am on Aug 1, 2008 (gmt 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

jetboy




msg:3712806
 11:02 am on Aug 1, 2008 (gmt 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.

michaelh613




msg:3713047
 2:45 pm on Aug 1, 2008 (gmt 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.

michaelh613




msg:3713093
 3:23 pm on Aug 1, 2008 (gmt 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?

DrDoc




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

.small {  
font-size:8x;
}

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

michaelh613




msg:3713451
 8:14 pm on Aug 1, 2008 (gmt 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;
}

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved