How we can customize a select options dropdown using HTML, CSS, and JS? Solution: See this Custom Select Dropdown Options Using jQuery and CSS, Option Group Divide.
Earlier I have shared a pure HTML CSS Custom Select, but this is more advanced and it has groups of values. Basically, HTML has a specific <select> tag for creating selectable option interface. By default, it looks like a simple and non-stylish element according to this modern web design era. But we can customize style and functions using CSS and JS, this program is for styling select dropdown options using jQuery and CSS.
Today you will learn to customize a basic select menu to a creative and functional one. There is select option input with a placeholder like “Select an Option”. When you will click on that, then an option list dropdown will appear. Inside the dropdown, the options are in two groups and each group contains 3 options. Also, the group dividers are completely stylish and visible, after selecting an option the dropdown will close and input will show selected option with a little animation effect.
So, Today I am sharing Custom Select Dropdown Options Using jQuery and CSS. There I have used jQuery to create elements dynamically and complete functioning and CSS for styling. As we know it is a JS library, that’s why I am putting this post in the JavaScript category. This is a modern and stylish select option dropdown program, that you can use on your website.
If you are thinking now how this dropdown option groups actually are, then see the preview given below.
Preview Of Option Group in Dropdown
See this video preview to getting an idea of how this select program looks like.
Now you can see this visually, also you can see it live by pressing the button given above. If you like this, then get the source code of its.
You May Also Like:
Custom Select Dropdown Options Using jQuery and CSS Source Code
Before sharing source code, let’s talk about it. First I have created the main div with class name “container” and placed all elements inside it. Inside the container, I have placed a heading and a select option using HTML <select> tag. For creating the option group, I have used <optgroup> tag inside the select tag and placed options inside this group tag. Also in the HTML file, I have linked external files like CSS, JS, and jQuery CDN link.
Now using CSS I have placed all the elements in the right place, as you can see in the preview. You will see I gave values to many class and ID which are not in HTML file because jQuery creating elements dynamically. With CSS I gave basic values like size, position, color, margin, padding, etc. For the little animation effect used CSS @Keyframe command.
jQuery handling here the main features and functions in this program. jQuery using here if{} else{} statements and creating HTML elements dynamically. And used .toggleClass command for open and close the dropdown. There is a long section of jQuery codes, and the codes are a little complicated.
You will understand all the concept after getting the codes, I can’t explain all here in writing. For creating this program you have to create 3 files. First file for HTML, second file for CSS, and the third file for JavaScript. Follow the steps to creating this program without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<!DOCTYPE html> <!-- Code By Webdevtrick ( https://webdevtrick.com ) --> <html lang="en" > <head> <meta charset="UTF-8"> <title>Custom Select Option | Webdevtrick.com</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <h2>Custom Select Option Dropdown</h2> <select name="characters" class="custom-select" tabindex="-1" id="select-name"> <option value="" selected>Select a Option...</option> <optgroup label="Frontend"> <option value="html">HTML</option> <option value="css">CSS</option> <option value="js">JavaScript</option> </optgroup> <optgroup label="Backend"> <option value="php">PHP</option> <option value="sql">MySQL</option> <option value="python">Python</option> </optgroup> </select> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="function.js"></script> </body> </html> |
style.css
Now create a CSS file named ‘style.css’ and put these codes given here.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 |
/* Code By Webdevtrick ( https://webdevtrick.com ) */ *, *:before, *:after { box-sizing: border-box; } html { font-size: 62.5%; text-size-adjust: 100%; } body { font-weight: 400; font-variant: normal; font-style: normal; font-size: 1.4rem; line-height: 1.5; font-family: 'Source Sans Pro', sans-serif; font-smoothing: antialiased; } h2 { color: #34495e; padding-bottom: 1.4rem; font-size: 3.5rem; line-height: 1.2; } .container { width: 50%; max-width: 40rem; margin: 4.9rem auto 0; } .custom-select { display: none; } .dropdown-container { position: relative; } /* entypo */ [class*="entypo-"]:before { font-family: 'entypo', sans-serif; } .dropdown-select { z-index: 200; padding: 1.4rem; text-align: left; font-size: 1.8rem; line-height: 1; cursor: pointer; transition: background-color 0.2s ease; } .dropdown-select:before { float: right; transition: 0.3s ease; } .active .dropdown-select:before { transform: rotate(180deg); } .dropdown-select-ul { display: none; z-index: 100; position: absolute; width: 100%; max-height: 50rem; overflow: scroll; overflow-y: auto; overflow-x: hidden; text-align: left; border: 1px solid; border-top: none; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); } .dropdown-select-ul li { display: block; padding: 0.7rem 1.4rem; cursor: pointer; } .dropdown-select-ul li.selected, .dropdown-select-ul li.optgroup { cursor: default; } .dropdown-select-ul li.optgroup { width: 92%; padding-right: 0.7rem; margin: 0 4%; border-bottom: 1px solid; font-size: 90%; text-align: right; } .active .dropdown-select-ul { display: block; animation-fill-mode: both; animation-duration: 0.3s; animation-name: fadeIn; } .no-js .custom-select { display: block; } .no-js .dropdown-select, .no-js .dropdown-select-ul { display: none; } .dropdown-select { background-color: #bdc3c7; color: #ecf0f1; } .dropdown-select:hover, .dropdown-select:focus { background-color: #34495e; } .active .dropdown-select { background-color: #34495e; } .dropdown-select-ul { border-color: #34495e; background: #ecf0f1; color: #34495e; } .dropdown-select-ul li:hover, .dropdown-select-ul li:focus { background: #e3e9eb; } .dropdown-select-ul li.selected { background: #dae2e4; color: #34495e; } .dropdown-select-ul li.optgroup { background: #ecf0f1; color: #a1aab0; border-bottom-color: #bdc3c7; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } |
function.js
The final step, create a JavaScript file named ‘function.js‘ and put the codes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 |
// Code By Webdevtrick ( https://webdevtrick.com ) (function($){ var customSelect = $('select.custom-select'); // FIRST, create the custom select menus from the existing select customSelect.each(function() { var that = $(this); var listID = that.attr('id'), groups = that.children('optgroup'), theOptions = "", startingOption = "", customSelect = ""; //check if there are option groups if(groups.length) { groups.each(function() { var curGroup = $(this); var curName = curGroup.attr('label'); //Open the option group theOptions += '<li class="optgroup">' + curName + '</li>'; //get the options curGroup.children('option').each(function() { var curOpt = $(this); var curVal = curOpt.attr('value'), curHtml = curOpt.html(), isSelected = curOpt.attr('selected'); if(isSelected === 'selected') { startingOption = curHtml; theOptions += '<li class="selected" data-value="' + curVal + '">' + curHtml + '</li>'; }else { theOptions += '<li data-value="' + curVal + '">' + curHtml + '</li>'; } }); //Close the option group //theOptions += '<li class="optgroup-close"></li>'; }); //add options not in a group to the top of the list that.children('option').each(function() { var curOpt = $(this); var curVal = curOpt.attr('value'), curHtml = curOpt.html(), isSelected = curOpt.attr('selected'); if(isSelected === 'selected') { startingOption = curHtml; theOptions = '<li class="selected" data-value="' + curVal + '">' + curHtml + '</li>' + theOptions; }else { theOptions = '<li data-value="' + curVal + '">' + curHtml + '</li>' + theOptions; } }); } else { that.children('option').each(function() { var curOpt = $(this); var curVal = curOpt.attr('value'), curHtml = curOpt.html(), isSelected = curOpt.attr('selected'); if(isSelected === 'selected') { startingOption = curHtml; theOptions += '<li class="selected" data-value="' + curVal + '">' + curHtml + '</li>'; }else { theOptions += '<li data-value="' + curVal + '">' + curHtml + '</li>'; } }); } //build the custom select customSelect = '<div class="dropdown-container"><div class="dropdown-select entypo-down-open-big"><span>' + startingOption + '</span></div><ul class="dropdown-select-ul" data-role="' + listID +'">' + theOptions + '</ul></div> <!-- .custom-select-container -->'; //append it after the actual select $(customSelect).insertAfter(that); }); var selectdd = $('.dropdown-select'), selectul = $('.dropdown-select-ul'), selectli = $('.dropdown-select-ul li'); //THEN make them work selectdd.on('click',function(){ $(this).parent('.dropdown-container').toggleClass('active'); }); //Hide it on mouseleave selectul.on('mouseleave',function(){ $(this).parent('.dropdown-container').removeClass('active'); }); //select the option selectli.on('click',function(){ var that = $(this); //ensure clicking group labels does not cause change if(!that.hasClass('optgroup')) { var parentUl = that.parent('ul'), thisdd = parentUl.siblings('.dropdown-select'), lihtml = that.html(), livalue = that.attr('data-value'), originalSelect = '#' + parentUl.attr('data-role'); //close the dropdown parentUl.parent('.dropdown-container').toggleClass('active'); //remove selected class from all list items that.siblings('li').removeClass('selected'); //add .selected to clicked li that.addClass('selected'); //set the value of the hidden input $(originalSelect).val(livalue); //change the dropdown text thisdd.children('span').html(lihtml); } }); })(jQuery); |
That’s It. Now you have successfully created Custom Select Dropdown Options Using jQuery and CSS, Option Group program. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
