I am working on this site:

 

http://www.tiwfc.co.uk/WaT/index.php

 

I know, I know, it doesn't look great but it is what the client wants. I am wondering what is the best way to style up the drop-down list of the form; the other inputs were easy to style, but this one is pretty tricky and I have never had to style up a form this much!!

 

The drop down box should look like a smaller version of the input boxes if that is possible?

 

Any help is much appreciated

Any input, select box, etc can be styled either for all like this

input { background-color: red; }

select { color: green; }

 

or by giving a class to those you want to change like

 

.box3 { background-color: red; }

 

and the html markup

<input class="box3" type="text" name="data[firstName]" value="" class="inputTextFirstName"/>

Thanks; I kind of knew that to be honest, but I need to add in the previously-said border; with the select being within the white main area...

 

When I tried to add a background to it, it just added a background image to the box

Look at the form.css file to see how the others were done:-

 

.inputTextTicket

{

border:solid 0 #fff;

background:url(../images/form/form-code.png) no-repeat;

width:194px;

height:43px;

padding:20px 18px;

}

 

which gives a background image and a width and height and see if you can do the same for the drop down box, but I think you will have to make an image to suit the size unless you use the same size and image as for one of the other input boxes. This is the smallest

http://www.tiwfc.co.uk/WaT/images/form/form-first-name.png

 

If th edrop down part is difficult to cover with an image it may be easier to have a series of radio buttons for Mr Mrs Ms and Miss in a fixed size box to avoid the drop down.

Again, thanks; BUT... I know about the form.css file as I did code the site

 

But as I said; when I do the same thing with a select rather than an input, it seems to apply the background to the select RATHER than behind it - if that makes sense?

 

There is already a title graphic ready: http://www.tiwfc.co.uk/WaT/images/form/form-title.png

when I do the same thing with a select rather than an input, it seems to apply the background to the select RATHER than behind it - if that makes sense?

 

 

Can you apply the background to the td tag?

 

And then style the select box too to make it a little less like the standard box, although I don't think you can change the style of the arrow.

Nice idea - i'll give it a go

 

Nice lateral thinking dude

This is the best I can do with your Title image which isn't the same height as the adjacent one and it needs to be slightly wider to accommodate the longer word Miss and the arrow:-

 

http://www.wickham43.com/forumposts/teryindex090728.html

 

Firefox and Safari have no border to the select drop down box but IE refuses to get rid of it.

Yeah that is where I got too as well - just found this though... http://www.scottdarby.com/plugins/stylish-select/0.3/

 

Which looks like it'll do what I need

 

Thanks for the help Wickham mate

<select> and styling has always been a royal pain in the arse.

 

This makes a good read:

http://jeffhowden.com/code/css/forms/