css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

A custom select menu with jQuery and CSS.

Comments

  1. Could you tell me what the source of the JS?

  2. Thanks Erick, i am using your plugin for a personal work.

    This is a version i have modified to allow using the tab to navigate in the inputs and drop down.

    http://codepen.io/anon/pen/kcpqd

    I am trying now to implement the use of the keyboard arrows to move into the dropdown menu, exactly like this form : https://secure.hulu.com/signup?src=top-nav_loc_landing_b&plus=1

    Can you point me on the right direction to get this functionality?

  3. Hi, thanks cool select.

    disabled="disabled" How is this done?

  4. HI , Cool Design . But there is a problem , Any javascript function is not working like onclick and especially oonchange . Please could you help me ?

  5. Hey. In case anyone else finds this but needs a menu to close when clicking it again, try adding .not(this) to line 30. $('div.select-styled.active').not(this).each(function(){

  6. @Liam this solution works... thanks" :D

  7. Real life saver - thank you!

  8. Great job!

  9. Hello, I've forked your idea and after a little tweaking I've found a minor issue:

    I would change $styledSelect.text($this.children('option').eq(0).text());

    for this

    $styledSelect.text($this.children('option:selected').text());

    that's cause when you wanna default the selected value to another one that is not the first you want it to change to that value.

    cheers, love your work!

  10. Help me upgrade my Custom Select Menu,

    1: is Select box background-color For example: option 1, background-color = red; option 2, background-color = yellow; option 3, background-color = blue; 2: Selected option changed by option selected 3. Display the background-color of the Slected option

    Since I do not understand many javascript Thank you Email: anhquocktxd@gmail.com

  11. @wallaceerick Help me upgrade my Custom Select Menu,

    1: is Select box background-color For example: option 1, background-color = red; option 2, background-color = yellow; option 3, background-color = blue; 2: Selected option changed by option selected 3. Display the background-color of the Slected option

    Since I do not understand many javascript Thank you Email: anhquocktxd@gmail.com

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.
Loading...
Loading...