Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,310
    Thanks
    203
    Thanked 2,563 Times in 2,541 Posts
    Most browsers doesn't support customizing of select elements or options using css.

    This will customise the color/bgcolor of a select list:-

    Code:
    <select id = "fruits">
    <option value = "0" selected>Select a fruit......</option>
    <option value = "1" style="background-color: teal; color: yellow;"> Apple<br>
    <option value = "2" style="background-color: lightgreen; color: green;"> Pear<br>
    <option value = "3" style="background-color: red; color: white;"> Peach<br>
    </select>
    AFAIK that is the best you can do.

    Quizmaster: The Italian company Gaggia manufactures machines for making what drink?
    Contestant: Whisky.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,919
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    Quote Originally Posted by Oscar34 View Post
    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.
    Punctuation isn’t quite your strength, is it?
    I interpret this and they way you are essentially demanding for something to be provided for you as ignorance of the simplest rules of respect and therefore decide to ignore your request in return.


  •  

    Posting Permissions

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