SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    May 2012
    0 Post(s)
    0 Thread(s)

    Styled select element of a form

    Would be grateful if anyone tell me a js and css code to make a select element on a form that select element has rounded cornered borders and its background has different color and its drop down list background and borders has different colors and also the arrow of this select element is an image arrow. Cheers.

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Madison, WI
    34 Post(s)
    2 Thread(s)
    Styling the SELECT tag is not only nearly impossible, but its not advisable from a UI point of view. Users have been conditioned for SELECT drop down to look a certain way, and if you change that.. no matter how pretty you make it, it wont be something they recognize as functional.

    You can change the basic stile such as BG, and text color of the DISPLAYED( selected) text inside the SELECT box, but not of the popup menu. ( see above)

    I hope you take that into consideration.

    That beign said, you can use vendor specific properties (-o, -moz,-webkit, am not sure if MS supports this at all) and set SELECT {appearance: none; display:block;} . SO far as I have tested this doesnt kill the functionality ( and of course you still CANT style the popup) but allows you to style the SELECT just like any other HTML tag. Still I'd advice against it.


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts