Welcome to ThemesGadget, In this post, we are going to learn How To Make Custom Multiple Select Dropdown List In Blogger we are going to make a drop-down multiple select with Jquery, HTML, CSS, just follow our steps carefully for avoiding any type of error or problem.
If you have any questions like How do I select multiple options in a drop-down list? How do I create a drop-down menu in blogger? How do I create a custom dropdown in CSS?, then this blog post is for you, but first, Let's talk about it a little.
What Is Multiple Select Dropdown List?
The purpose of a dropdown list is to quickly organize options on the page, rather than to assist users in finding particular information. As the name suggests, dropdown lists are usually listed items. They can be placed in the middle or on the side of a page.
As you’ll know, many types of dropdown lists can be used in web design. They provide a quick way to filter out options for users. You may have come across them on websites or apps, where they are often seen as the best option for sorting through large amounts of information.
A Great Example:
The Google search bar. When you type in something into the search bar, it automatically creates a dropdown list with every possible suggestion that matches your input. For this reason, it’s important to understand how to create a custom multiple select dropdown list to make the most of this function for your website. That’s why we’ve put together this guide
Why Are dropdown Lists Useful?
Dropdown lists are useful because they allow you to make things even easier for your users. They are great for searching through different options, filtering out information, and taking away what isn’t necessary. This is why a dropdown list is often seen as the go-to option when it comes to designing websites or apps.
Below are a few steps for creating a custom multiple select dropdown list without a checkbox in blogger or WordPress website.
How To Make Multiple Select Dropdown List?
To make a custom multiple select dropdown list for your blogger site, you need to add HTML, CSS, and JavaScript(Jquery) codes. These codes have to be added in 3 steps. We will add HTML code in the 1st step, CSS in the 2nd step, and JavaScript in the last step.
Step 1 - Adding HTML
<div align="center">
<select multiple data-placeholder="Add Options">
<option>Blogger</option>
<option selected>Themes</option>
<option>Widgets</option>
<option>Tutorial</option>
<option>Demo</option>
</select>
</div>
Step 2 - Adding CSS
These CSS Codes are in Compressed format if you want to beautify you can use our tool by Following this Link - CSS Beautifier Tool
<style type="text/css">
.selectMultiple{width:240px;position:relative;}.selectMultiple select{display:none;}.selectMultiple>div{position:relative;z-index:2;padding:8px 12px 2px 12px;border-radius:8px;background:#fff;font-size:14px;min-height:44px;box-shadow:0 4px 16px 0 rgba(22,42,90,0.12);transition:box-shadow 0.3s ease;text-align:left}.selectMultiple>div:hover{box-shadow:0 4px 24px -1px rgba(22,42,90,0.16);}.selectMultiple>div .arrow{right:1px;top:0;bottom:0;cursor:pointer;width:28px;position:absolute;}.selectMultiple>div .arrow:before,.selectMultiple>div .arrow:after{content:"";position:absolute;display:block;width:2px;height:8px;border-bottom:8px solid #99A3BA;top:43%;transition:all 0.3s ease;}.selectMultiple>div .arrow:before{right:12px;transform:rotate(-130deg);}.selectMultiple>div .arrow:after{left:9px;transform:rotate(130deg);}.selectMultiple>div span{color:#99A3BA;display:block;position:absolute;left:12px;cursor:pointer;top:8px;line-height:28px;transition:all 0.3s ease;}.selectMultiple>div span.hide{opacity:0;visibility:hidden;transform:translate(-4px,0);}.selectMultiple>div a{position:relative;padding:0 24px 6px 8px;line-height:28px;color:#1E2330;display:inline-block;vertical-align:top;margin:0 6px 0 0;}.selectMultiple>div a em{font-style:normal;display:block;white-space:nowrap;}.selectMultiple>div a:before{content:"";left:0;top:0;bottom:6px;width:100%;position:absolute;display:block;background:rgba(228,236,250,0.7);z-index:-1;border-radius:4px;}.selectMultiple>div a i{cursor:pointer;position:absolute;top:0;right:0;width:24px;height:28px;display:block;}.selectMultiple>div a i:before,.selectMultiple>div a i:after{content:"";display:block;width:2px;height:10px;position:absolute;left:50%;top:50%;background:#555eed;border-radius:1px;}.selectMultiple>div a i:before{transform:translate(-50%,-50%) rotate(45deg);}.selectMultiple>div a i:after{transform:translate(-50%,-50%) rotate(-45deg);}.selectMultiple>div a.notShown{opacity:0;transition:opacity 0.3s ease;}.selectMultiple>div a.notShown:before{width:28px;transition:width 0.45s cubic-bezier(0.87,-0.41,0.19,1.44) 0.2s;}.selectMultiple>div a.notShown i{opacity:0;transition:all 0.3s ease 0.3s;}.selectMultiple>div a.notShown em{opacity:0;transform:translate(-6px,0);transition:all 0.4s ease 0.3s;}.selectMultiple>div a.notShown.shown{opacity:1;}.selectMultiple>div a.notShown.shown:before{width:100%;}.selectMultiple>div a.notShown.shown i{opacity:1;}.selectMultiple>div a.notShown.shown em{opacity:1;transform:translate(0,0);}.selectMultiple>div a.remove:before{width:28px;transition:width 0.4s cubic-bezier(0.87,-0.41,0.19,1.44) 0s;}.selectMultiple>div a.remove i{opacity:0;transition:all 0.3s ease 0s;}.selectMultiple>div a.remove em{opacity:0;transform:translate(-12px,0);transition:all 0.4s ease 0s;}.selectMultiple>div a.remove.disappear{opacity:0;transition:opacity 0.5s ease 0s;}.selectMultiple>ul{margin:0;padding:0;list-style:none;font-size:16px;z-index:1;position:absolute;top:100%;left:0;right:0;visibility:hidden;opacity:0;border-radius:8px;transform:translate(0,20px) scale(0.8);transform-origin:0 0;filter:drop-shadow(0 12px 20px rgba(22,42,90,0.08));transition:all 0.4s ease,transform 0.4s cubic-bezier(0.87,-0.41,0.19,1.44),filter 0.3s ease 0.2s;}.selectMultiple>ul li{color:#1E2330;background:#fff;padding:12px 16px;cursor:pointer;overflow:hidden;position:relative;transition:background 0.3s ease,color 0.3s ease,transform 0.3s ease 0.3s,opacity 0.5s ease 0.3s,border-radius 0.3s ease 0.3s;text-align:left;}.selectMultiple>ul li:first-child{border-radius:8px 8px 0 0;}.selectMultiple>ul li:first-child:last-child{border-radius:8px;}.selectMultiple>ul li:last-child{border-radius:0 0 8px 8px;}.selectMultiple>ul li:last-child:first-child{border-radius:8px;}.selectMultiple>ul li:hover{background:#555eed;color:#fff;}.selectMultiple>ul li:after{content:"";position:absolute;top:50%;left:50%;width:6px;height:6px;background:rgba(0,0,0,0.4);opacity:0;border-radius:100%;transform:scale(1,1) translate(-50%,-50%);transform-origin:50% 50%;}.selectMultiple>ul li.beforeRemove{border-radius:0 0 8px 8px;}.selectMultiple>ul li.beforeRemove:first-child{border-radius:8px;}.selectMultiple>ul li.afterRemove{border-radius:8px 8px 0 0;}.selectMultiple>ul li.afterRemove:last-child{border-radius:8px;}.selectMultiple>ul li.remove{transform:scale(0);opacity:0;}.selectMultiple>ul li.remove:after{-webkit-animation:ripple 0.4s ease-out;animation:ripple 0.4s ease-out;}.selectMultiple>ul li.notShown{display:none;transform:scale(0);opacity:0;transition:transform 0.35s ease,opacity 0.4s ease;}.selectMultiple>ul li.notShown.show{transform:scale(1);opacity:1;}.selectMultiple.open>div{box-shadow:0 4px 20px -1px rgba(22,42,90,0.12);}.selectMultiple.open>div .arrow:before{transform:rotate(-50deg);}.selectMultiple.open>div .arrow:after{transform:rotate(50deg);}.selectMultiple.open>ul{transform:translate(0,12px) scale(1);opacity:1;visibility:visible;filter:drop-shadow(0 16px 24px rgba(22,42,90,0.16));}@-webkit-keyframes ripple{0%{transform:scale(0,0);opacity:1;}25%{transform:scale(30,30);opacity:1;}100%{opacity:0;transform:scale(50,50);}}@keyframes ripple{0%{transform:scale(0,0);opacity:1;}25%{transform:scale(30,30);opacity:1;}100%{opacity:0;transform:scale(50,50);}}
</style>
Step 3 - Adding JavaScript
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script>
$(document).ready(function() {
var select = $('select[multiple]');
var options = select.find('option');
var div = $('<div />').addClass('selectMultiple');
var active = $('<div />');
var list = $('<ul />');
var placeholder = select.data('placeholder');
var span = $('<span />').text(placeholder).appendTo(active);
options.each(function() {
var text = $(this).text();
if($(this).is(':selected')) {
active.append($('<a />').html('<em>' + text + '</em><i></i>'));
span.addClass('hide');
} else {
list.append($('<li />').html(text));
}
});
active.append($('<div />').addClass('arrow'));
div.append(active).append(list);
select.wrap(div);
$(document).on('click', '.selectMultiple ul li', function(e) {
var select = $(this).parent().parent();
var li = $(this);
if(!select.hasClass('clicked')) {
select.addClass('clicked');
li.prev().addClass('beforeRemove');
li.next().addClass('afterRemove');
li.addClass('remove');
var a = $('<a />').addClass('notShown').html('<em>' + li.text() + '</em><i></i>').hide().appendTo(select.children('div'));
a.slideDown(400, function() {
setTimeout(function() {
a.addClass('shown');
select.children('div').children('span').addClass('hide');
select.find('option:contains(' + li.text() + ')').prop('selected', true);
}, 500);
});
setTimeout(function() {
if(li.prev().is(':last-child')) {
li.prev().removeClass('beforeRemove');
}
if(li.next().is(':first-child')) {
li.next().removeClass('afterRemove');
}
setTimeout(function() {
li.prev().removeClass('beforeRemove');
li.next().removeClass('afterRemove');
}, 200);
li.slideUp(400, function() {
li.remove();
select.removeClass('clicked');
});
}, 600);
}
});
$(document).on('click', '.selectMultiple > div a', function(e) {
var select = $(this).parent().parent();
var self = $(this);
self.removeClass().addClass('remove');
select.addClass('open');
setTimeout(function() {
self.addClass('disappear');
setTimeout(function() {
self.animate({
width: 0,
height: 0,
padding: 0,
margin: 0
}, 300, function() {
var li = $('<li />').text(self.children('em').text()).addClass('notShown').appendTo(select.find('ul'));
li.slideDown(400, function() {
li.addClass('show');
setTimeout(function() {
select.find('option:contains(' + self.children('em').text() + ')').prop('selected', false);
if(!select.find('option:selected').length) {
select.children('div').children('span').removeClass('hide');
}
li.removeClass();
}, 400);
});
self.remove();
})
}, 300);
}, 400);
});
$(document).on('click', '.selectMultiple > div .arrow, .selectMultiple > div span', function(e) {
$(this).parent().parent().toggleClass('open');
});
});
</script>
Conclusion
Make sure you use the few simple web design techniques and strategies you’ve learned in this guide. You’ll make your design website much more attractive and easier to navigate, which will lead to many more visitors who will leave your site has had a great experience.
We hope that this post helped you to make a custom multiple select dropdown list on your blogger website. Do let us know if you have any other questions regarding dropdown menus. You can get in touch with us via our contact form or telegram.
