Jump to content
Stef's Coding Community
Sign in to follow this  
dianikol85

css for html select box

Recommended Posts

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!

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

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.

 

 

Share this post


Link to post
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...
Sign in to follow this  

×
×
  • Create New...