css for html select box

[dianikol85]

Hi to all!

 

I have some select boxes that i need to style. The only problem is i don't how to change the right button css.

 

Any tips for that???

 

 

Thanks!

[Wickham]

You can style a select box like any other element. Here are two tutorials:-

http://www.456bereastreet.com/archive/200410/styling_even_more_form_controls/

http://www.456bereastreet.com/lab/form_controls/select_multiple/

 

Give the select box a style like:-

select { background-color: #123abc; }

and you can give it a class or id if you only want to style one select box when you have several on a page.

[edegagne]

You can style a select box like any other element. Here are two tutorials:-

http://www.456bereastreet.com/archive/200410/styling_even_more_form_controls/

http://www.456bereastreet.com/lab/form_controls/select_multiple/

 

Give the select box a style like:-

select { background-color: #123abc; }

and you can give it a class or id if you only want to style one select box when you have several on a page.

 

This is not entirely a true statement and NOT what the original poster asked about.

 

Yes, the html select can have SOME css styles applied. But NO, you cannot change the dropdown arrow though Css. You can use a jQuery solution or a dhtml solution and there are plenty of examples on the web in doing so.

 

But No, not the dropdown arrow itself. Chrome and possibly the latest version of FireFox are starting to support it, but IE, Opera, etc do not support it.

[benjaminmorgan]

Actually if you are just talking about changing the drop down arrow you can do it with just CSS. The solution is to add a div before the select box and make the width smaller and so on and just read this it will explain it more http://bavotasan.com/2011/style-select-box-using-only-css/ It is a good read. Of course you would have to style the option tag as well.

Edited June 29, 2012 by benjaminmorgan

[newseed]

Actually if you are just talking about changing the drop down arrow you can do it with just CSS. The solution is to add a div before the select box and make the width smaller and so on and just read this it will explain it more http://bavotasan.com/2011/style-select-box-using-only-css/ It is a good read. Of course you would have to style the option tag as well.

Nice tip but the drawback is when the options text exceeds the fixed select width thus overlaying the arrow. Sure you could widen it but it would not work if you are trying to fit this within a certain space.

[benjaminmorgan]

Yeah, but if you know the text that is being added you can style it with CSS. If it is being added dynamically it could extend the full width and that wouldn't work well.

[BaebarJastin41]

Hello,

Give the "id" for start date and access it within your Javascript that fetches the values using Ajax. Once you get access to the drop down you can add values to it.

You should use Java script framework such as jQuery and its API documentation will help you to do this.