Jump to content

css for html select box


dianikol85

Recommended Posts

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.

Link to comment
Share on other sites

  • 1 year later...

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.

Link to comment
Share on other sites

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 by benjaminmorgan
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...