homepage Welcome to WebmasterWorld Guest from 23.22.173.58
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
question on how to style a select form
michaelh613

5+ Year Member



 
Msg#: 3712644 posted 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

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



 
Msg#: 3712644 posted 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

5+ Year Member



 
Msg#: 3712644 posted 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

5+ Year Member



 
Msg#: 3712644 posted 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

5+ Year Member



 
Msg#: 3712644 posted 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

5+ Year Member



 
Msg#: 3712644 posted 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

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



 
Msg#: 3712644 posted 3:53 pm on Aug 1, 2008 (gmt 0)

.small {  
font-size:8x;
}

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

michaelh613

5+ Year Member



 
Msg#: 3712644 posted 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