Multiple Select Dropdown With Checkbox In HTML
Last Updated : Mar 11, 2024
IN - HTML JavaScript CSS | Written & Updated By - Ashish
In this tutorial we will show you multiple select dropdown with checkbox in HTML, we achieve the multiple select checkbox from dropdown by using CSS and Javascript only.
Javascript is used by programmers across the world to create dynamic and interactive web content like applications and browsers and it is a client side programming language.
CSS (Cascading Style Sheet) describes how elements should be rendered on screen.
Step By Step Guide On Multiple Select Dropdown With Checkbox In HTML :-
First we created select option with lists by using <div>, <input> and <label> these tags.
In script we handled toggle by toggle() method. This method toggles between hide() and show() for the selected elements.
It checks the selected elements for visibility. Show() is run if an element is hidden. Hide() is run if an element is visible. These things create a toggle effect.
<!DOCTYPE html>
<html>
<head>
<title>Multi Selection in Checkbox</title>
<style>
input{
outline: none;
border: none;
}
.multi-selector{
width: max-content;
}
.select-field{
border: 1px solid rgb(187, 187, 187);
}
.select-field,.task,.list{
width: 100%;
background-color: white;
padding: 0.3rem;
}
.list{
box-shadow: 0 20px 40px rgb(0,0,0,0.2);
display: none;
}
.down-arrow{
font-size: 1.2rem;
display: inline-block;
cursor: pointer;
transition: 0.2s linear;
}
.task{
display: block;
padding-left: 0;
}
.task span{
float: right;
font-size: 0.6rem;
padding-top: 6px;
}
.task:hover{
background-color: aliceblue;
}
.show{
display: block;
}
.rotate180{
transform: rotate(-60deg);
}
</style>
</head>
<body>
<div class="multi-selector">
<div class="select-field">
<input type="text" name="" placeholder="Choose tasks" id="" class="input-selector">
<span class="down-arrow">▾</span>
</div>
<!------------List of checkboxes and options----------->
<div class="list">
<label for="task1" class="task">
<input type="checkbox" name="" id="task1">
Pink
</label>
<label for="task2" class="task">
<input type="checkbox" name="" id="task2">
Orange
</label>
<label for="task3" class="task">
<input type="checkbox" name="" id="task3">
Green
</label>
<label for="task4" class="task">
<input type="checkbox" name="" id="task4">
Purple
</label>
</div>
</div>
<script>
document.querySelector('.select-field').addEventListener('click',()=>{
document.querySelector('.list').classList.toggle('show');
document.querySelector('.down-arrow').classList.toggle('rotate180');
});
</script>
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is containing information about webpage and if you need any external file those links are declared here. <title> tag is used for set the webpage title.
- In <style> tag we used more block of properties for achieve like <select> element in html. Let see each every properties after seen about what are the html elements defined.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- <div> tag with class ‘multi-selector’ is a main div container and <div> tag with class ‘select-field’ container for select box. Within a ‘select-field’ <div> we created text input field with placeholder ‘choose tasks’ to display on input field. <span> tag used for insert down arrow symbol to the input tag.
- In ‘select-field’ tag we sets border property then ‘.select-field,.task,.list’ as we know when two or more classes has to use same property they are all declared in single row with block of styles.
- Those element needs same width with 100%, background color should be white has padding ‘0.3rem’. Another <div> with class ‘list’ for define group of options for select.
- <label> created for each option <input> tags. Using <input> tag id each <label> for attribute that means each label created for respective input tag only.
- These <input> tag are ‘checkbox’ type. All <label> has class ‘task’ for style purpose. In ‘task’ has style properties, ‘display: block;’ for each option defined one below one and ‘padding-left: 0;’ denotes has no left side padding allowed.
- When user hover over the options ‘background-color: aliceblue;’ changed by ‘task:hover’. Each input tag has <span> tag with text. Those texts needs to align to right so ‘float: right;’ , their font size denotes ‘font-size: 0.6rem;’ and align from top ‘padding-top: 6px;’.
- In input select field we used down arrow it size should be 1.2rem so used ‘font-size: 1.2rem;’ , ‘display: inline-block;’ then only down arrow appears near input select box otherwise it fails to appear correctly.
- When user hover over the down arrow cursor needs to point that so we used ‘cursor: pointer;’ . When giving ‘transition’ property to any element those movements looks like animation and looks cool on webpage so we used ‘transition: 0.2s linear;’, 0.2s is time and linear is style.
- Initially <input> selecting options needs to hidden so use ‘display: none;’ , when use ‘box-shadow: 0 20px 40px rgb(0,0,0,0.2);’ behind the options shadow appear. All <input> tags has to be no-border ‘border: none;’ and no-outline ‘border: none;’.
- In <script> tag when user clicks on select input box ‘addEventListener()’ activated. So ‘document.querySelector('.list').classList.toggle('show')’ this line select the list <div> and accessing toggle() method in javascript. ‘show’ class initially set to ‘display:block’ so the list options are change to visible. Down arrow also rotates 180deg to facing upside.
- Both </body>, </html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
I hope this tutorial on multiple select dropdown with checkbox in HTML helps you and the steps and method mentioned above are easy to follow and implement.
In conclusion we are able to know how to create multi select checkbox from dropdown list using css and javascript.
Now when user click on ‘choose tasks’ then only list of options will appear with the help of toggle() and we can select multiple options from the dropdown list. Lets create your toggling by using this concept.
About Ashish
