How to use Checkbox inside Select Option

The client has given me a design which has a Select Option menu containing a checkbox together with the item name as individual items in the list.
Is there anyway possible to add a checkbox inside a Select Option menu?

NB: Developer needs to add his own id to make the menu effective, I only need the HTML CSS code if it is possible.

edited Feb 21 '18 at 22:05

Vadim Ovchinnikov

6,89742547

asked Jul 18 '13 at 4:46

Hero Tra

363143

4

"I only need the HTML CSS code if it is possible anyway"... yes, it is possible... you will just need to code it by yourself or google it

– fmodos
Jul 18 '13 at 4:48

2

@fmodos Possible? Please throw us a demo, and OP - check this out... It is not possible with CSS and HTML only

– Mr. Alien
Jul 18 '13 at 4:51

Please read this post 1stwebdesigns.com/blog/development/…

– kuldeep raj
Jul 18 '13 at 4:54

@Mr.Alien I miss understood... I thought he was asking for a component that "could" be HTML CSS and not "had" to be only "HTML CSS"... my bad :/

– fmodos
Jul 18 '13 at 4:58

add a comment |

NB: Developer needs to add his own id to make the menu effective, I only need the HTML CSS code if it is possible.

edited Feb 21 '18 at 22:05

Vadim Ovchinnikov

6,89742547

asked Jul 18 '13 at 4:46

Hero Tra

363143

4

"I only need the HTML CSS code if it is possible anyway"... yes, it is possible... you will just need to code it by yourself or google it

– fmodos
Jul 18 '13 at 4:48

2

@fmodos Possible? Please throw us a demo, and OP - check this out... It is not possible with CSS and HTML only

– Mr. Alien
Jul 18 '13 at 4:51

Please read this post 1stwebdesigns.com/blog/development/…

– kuldeep raj
Jul 18 '13 at 4:54

@Mr.Alien I miss understood... I thought he was asking for a component that "could" be HTML CSS and not "had" to be only "HTML CSS"... my bad :/

– fmodos
Jul 18 '13 at 4:58

add a comment |

NB: Developer needs to add his own id to make the menu effective, I only need the HTML CSS code if it is possible.

edited Feb 21 '18 at 22:05

Vadim Ovchinnikov

6,89742547

asked Jul 18 '13 at 4:46

Hero Tra

363143

NB: Developer needs to add his own id to make the menu effective, I only need the HTML CSS code if it is possible.

html css html-select

edited Feb 21 '18 at 22:05

Vadim Ovchinnikov

6,89742547

asked Jul 18 '13 at 4:46

Hero Tra

363143

edited Feb 21 '18 at 22:05

Vadim Ovchinnikov

6,89742547

asked Jul 18 '13 at 4:46

Hero Tra

363143

edited Feb 21 '18 at 22:05

Vadim Ovchinnikov

6,89742547

edited Feb 21 '18 at 22:05

Vadim Ovchinnikov

6,89742547

edited Feb 21 '18 at 22:05

Vadim Ovchinnikov

6,89742547

asked Jul 18 '13 at 4:46

Hero Tra

363143

asked Jul 18 '13 at 4:46

Hero Tra

363143

asked Jul 18 '13 at 4:46

Hero Tra

363143

4

"I only need the HTML CSS code if it is possible anyway"... yes, it is possible... you will just need to code it by yourself or google it

– fmodos
Jul 18 '13 at 4:48

2

@fmodos Possible? Please throw us a demo, and OP - check this out... It is not possible with CSS and HTML only

– Mr. Alien
Jul 18 '13 at 4:51

Please read this post 1stwebdesigns.com/blog/development/…

– kuldeep raj
Jul 18 '13 at 4:54

@Mr.Alien I miss understood... I thought he was asking for a component that "could" be HTML CSS and not "had" to be only "HTML CSS"... my bad :/

– fmodos
Jul 18 '13 at 4:58

add a comment |

4

"I only need the HTML CSS code if it is possible anyway"... yes, it is possible... you will just need to code it by yourself or google it

– fmodos
Jul 18 '13 at 4:48

2

@fmodos Possible? Please throw us a demo, and OP - check this out... It is not possible with CSS and HTML only

– Mr. Alien
Jul 18 '13 at 4:51

Please read this post 1stwebdesigns.com/blog/development/…

– kuldeep raj
Jul 18 '13 at 4:54

@Mr.Alien I miss understood... I thought he was asking for a component that "could" be HTML CSS and not "had" to be only "HTML CSS"... my bad :/

– fmodos
Jul 18 '13 at 4:58

"I only need the HTML CSS code if it is possible anyway"... yes, it is possible... you will just need to code it by yourself or google it

– fmodos
Jul 18 '13 at 4:48

@fmodos Possible? Please throw us a demo, and OP - check this out... It is not possible with CSS and HTML only

– Mr. Alien
Jul 18 '13 at 4:51

Please read this post 1stwebdesigns.com/blog/development/…

– kuldeep raj
Jul 18 '13 at 4:54

@Mr.Alien I miss understood... I thought he was asking for a component that "could" be HTML CSS and not "had" to be only "HTML CSS"... my bad :/

– fmodos
Jul 18 '13 at 4:58

add a comment |

8 Answers
8

active

oldest

votes

142

You cannot place checkbox inside select element but you can get the same functionality by using HTML, CSS and JavaScript. Here is a possible working solution. The explanation follows.

enter image description here

Code:

var expanded = false;



function showCheckboxes() {

  var checkboxes = document.getElementById("checkboxes");

  if (!expanded) {

    checkboxes.style.display = "block";

    expanded = true;

  } else {

    checkboxes.style.display = "none";

    expanded = false;

  }

}

.multiselect {

  width: 200px;

}



.selectBox {

  position: relative;

}



.selectBox select {

  width: 100%;

  font-weight: bold;

}



.overSelect {

  position: absolute;

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

}



#checkboxes {

  display: none;

  border: 1px #dadada solid;

}



#checkboxes label {

  display: block;

}



#checkboxes label:hover {

  background-color: #1e90ff;

}

<form>

  <div class="multiselect">

    <div class="selectBox" onclick="showCheckboxes()">

      <select>

        <option>Select an option</option>

      </select>

      <div class="overSelect"></div>

    </div>

    <div id="checkboxes">

      <label for="one">

        <input type="checkbox" id="one" />First checkbox</label>

      <label for="two">

        <input type="checkbox" id="two" />Second checkbox</label>

      <label for="three">

        <input type="checkbox" id="three" />Third checkbox</label>

    </div>

  </div>

</form>

Explanation:

At first we create a select element that shows text "Select an option", and empty element that covers (overlaps) the select element (<div class="overSelect">). We do not want the user to click on the select element - it would show an empty options. To overlap the element with other element we use CSS position property with value relative | absolute.

To add the functionality we specify a JavaScript function that is called when the user clicks on the div that contains our select element (<div class="selectBox" onclick="showCheckboxes()">).

We also create div that contains our checkboxes and style it using CSS. The above mentioned JavaScript function just changes <div id="checkboxes"> value of CSS display property from "none" to "block" and vice versa.

The solution was tested in the following browsers: Internet Explorer 10, Firefox 34, Chrome 39. The browser needs to have JavaScript enabled.

More information:

CSS positioning

How to overlay one div over another div

http://www.w3schools.com/css/css_positioning.asp

CSS display property

http://www.w3schools.com/cssref/pr_class_display.asp

edited Mar 2 '18 at 11:47

Stephen Kennedy

7,159134967

answered Dec 18 '14 at 12:50

vitfo

5,42032025

FYI: This solution will require more effort if the more than one select list is required to be modified. I suggest going in for some actively maintained plugin.

– user216084
Feb 13 '15 at 12:47

1

Thank you ! Great job ! It's pure JS and ready to use. It's hard to find solution for that problem in net.

– atom
Mar 6 '15 at 8:47

1

This is good solution when don't want to use Jquery!!. Appreciative!!

– Power Star
Apr 13 '15 at 10:27

6

also to select box is not disappear when user select any options

– Pardeep Jain
Feb 1 '16 at 9:14

1

This answer is great and it worked for me. There is however one improvement I made on it. Instead of the overselect div that could potentially cause some problems in a complex interface I used <option selected hidden>Select an option</option>. It might not be the best use of hidden but it works.

– Syknapse
Apr 25 '18 at 8:24

|
show 6 more comments

The best plugin so far is Bootstrap Multiselect

<html xmlns="http://www.w3.org/1999/xhtml">

<head>



<title>jQuery Multi Select Dropdown with Checkboxes</title>



<link rel="stylesheet" href="css/bootstrap-3.1.1.min.css" type="text/css" />

<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css" />



<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>

<script type="text/javascript" src="js/bootstrap-3.1.1.min.js"></script>

<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>



</head>



<body>



<form id="form1">



<div style="padding:20px">



<select id="chkveg" multiple="multiple">



    <option value="cheese">Cheese</option>

    <option value="tomatoes">Tomatoes</option>

    <option value="mozarella">Mozzarella</option>

    <option value="mushrooms">Mushrooms</option>

    <option value="pepperoni">Pepperoni</option>

    <option value="onions">Onions</option>



</select>



<br /><br />



<input type="button" id="btnget" value="Get Selected Values" />



<script type="text/javascript">



$(function() {



    $('#chkveg').multiselect({



        includeSelectAllOption: true

    });



    $('#btnget').click(function(){



        alert($('#chkveg').val());

    });

});



</script>



</div>



</form>



</body>

</html>

Here's the DEMO

edited Mar 20 '18 at 7:24

answered Aug 20 '14 at 21:42

pmrotule

4,03923339

You need not to use these much of libraries for your solution. You can just use regular HTML Multiple select option. Thanks!

– Power Star
Apr 13 '15 at 10:22

3

I know I can use HTML multiple select option, but I found it ugly and not user friendly.

– pmrotule
Apr 13 '15 at 20:26

3

I like this plugin's behaviour, but want to use it without bootstrap... anything similar?

– singpolyma
Feb 2 '16 at 20:38

this plugin is so buggy... they have 150 open issues and maintainer said that he doesn't have time. so after some issues I switched to the accepted answer and vue

– Oleg Abrazhaev
Nov 15 '17 at 16:56

1

@Erbureth The external script/stylesheet paths were outdated in the demo (dead links). I updated the urls to fix it.

– pmrotule
Mar 20 '18 at 7:28

|
show 1 more comment

Try multiple-select. Looks to be much clean and managed solution, with tons of examples.

answered Apr 11 '15 at 1:55

Azghanvi

320313

add a comment |

For a Pure CSS approach, you can use the :checked selector combined with the ::before selector to inline conditional content.

Just add the class select-checkbox to your select element and include the following CSS:

.select-checkbox option::before {

  content: "2610";

  width: 1.3em;

  text-align: center;

  display: inline-block;

}

.select-checkbox option:checked::before {

  content: "2611";

}

You can use plain old unicode characters (with an escaped hex encoding) like these:

☐ Ballot Box - 2610

☑ Ballot Box With Check - 2611

Or if you want to spice things up, you can use these FontAwesome glyphs

.fa-square-o - f096

.fa-check-square-o - f046

Screenshot

Demo in jsFiddle & Stack Snippets

select {

  width: 150px;

}



.select-checkbox option::before {

  content: "2610";

  width: 1.3em;

  text-align: center;

  display: inline-block;

}

.select-checkbox option:checked::before {

  content: "2611";

}



.select-checkbox-fa option::before {

  font-family: FontAwesome;

  content: "f096";

  width: 1.3em;

  display: inline-block;

  margin-left: 2px;

}

.select-checkbox-fa option:checked::before {

  content: "f046";

}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">



<h3>Unicode</h3>

<select multiple="" class="form-control select-checkbox" size="5">

  <option>Dog</option>

  <option>Cat</option>

  <option>Hippo</option>

  <option>Dinosaur</option>

  <option>Another Dog</option>

</select>



<h3>Font Awesome</h3>

<select multiple="" class="form-control select-checkbox-fa" size="5">

  <option>Dog</option>

  <option>Cat</option>

  <option>Hippo</option>

  <option>Dinosaur</option>

  <option>Another Dog</option>

</select>

Note: Beware of IE compatibility issues however

answered Feb 13 '18 at 21:34

KyleMit

57.8k34238395

1

It's a problem when the multiple attribute makes the <select> look like a box instead of a dropdown...

– vsync
Apr 17 '18 at 8:23

@vsync, can you elaborate on what problem you're having, maybe even fork the fiddle and include a screenshot. The goal here is to apply to a <select multiple> element, so that should be the intended use case. The CSS selectors should be specific to applying that class so you decide to use on individual elements by applying the .select-checkbox class

– KyleMit
Apr 17 '18 at 15:02

1

Highly recommend this elegant solution if you're looking for a pure CSS approach.

– Anish Sana
Jun 18 '18 at 16:55

add a comment |

You can use this library on git for this purpose
https://github.com/ehynds/jquery-ui-multiselect-widget

for initiating the selectbox use this

    $("#selectBoxId").multiselect().multiselectfilter();

and when you have the data ready in json (from ajax or any method), first parse the data & then assign the js array to it

    var js_arr = $.parseJSON(/*data from ajax*/);

    $("#selectBoxId").val(js_arr);

    $("#selectBoxId").multiselect("refresh");

answered Apr 5 '18 at 5:15

Jaya Parwani

9216

add a comment |

Use this code for checkbox list on option menu.

.dropdown-menu input {

   margin-right: 10px;

}

<div class="btn-group">

    <a href="#" class="btn btn-primary"><i class="fa fa-cogs"></i></a>

    <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">

      <span class="caret"></span>

    </a>

    <ul class="dropdown-menu" style="padding: 10px" id="myDiv">

        <li><p><input type="checkbox" value="id1" > OA Number</p></li>

        <li><p><input type="checkbox" value="id2" >Customer</p></li>

        <li><p><input type="checkbox" value="id3" > OA Date</p></li>

        <li><p><input type="checkbox" value="id4" >Product Code</p></li>

        <li><p><input type="checkbox" value="id5" >Name</p></li>

        <li><p><input type="checkbox" value="id6" >WI Number</p></li>

        <li><p><input type="checkbox" value="id7" >WI QTY</p></li>

        <li><p><input type="checkbox" value="id8" >Production QTY</p></li>

        <li><p><input type="checkbox" value="id9" >PD Sr.No (from-to)</p></li>

        <li><p><input type="checkbox" value="id10" > Production Date</p></li>

        <button class="btn btn-info" onClick="showTable();">Go</button>

    </ul>

</div>

edited Sep 26 '18 at 12:31

KyleMit

57.8k34238395

answered Oct 31 '17 at 7:14

RSW

23638

For a fully fleshed out example on this basic approach of building a dropdown-menu with checkbox elements in each row, here's an answer for putting checkboxes in a Bootstrap dropdown

– KyleMit
Sep 26 '18 at 12:34

add a comment |

You might be loading multiselect.js file before the option list updated with AJAX call so while execution of multiselect.js file there is empty option list is there to apply multiselect functionlaity. So first update the option list by AJAX call then initiate the multiselect call you will get the dropdown list with the dynamic option list.

Hope this will help you out.

Multiselect dropdown list and related js & css files

// This function should be called while loading page

var loadParentTaskList = function(){

    $.ajax({

        url: yoururl,

        method: 'POST',

        success: function(data){

            // To add options list coming from AJAX call multiselect

            for (var field in data) {

                $('<option value = "'+ data[field].name +'">' + data[field].name + '</option>').appendTo('#parent_task');

            }

   

            // To initiate the multiselect call 

            $("#parent_task").multiselect({

                includeSelectAllOption: true

            })

        }

    });

}

// Multiselect drop down list with id parent_task

<select id="parent_task" multiple="multiple">

</select>

edited Jan 15 '17 at 7:41

clearlight

8,65893858

answered Aug 18 '16 at 13:56

Yaswini Modupalli

add a comment |

-1

var expanded = false;



function showCheckboxes() {

  var checkboxes = document.getElementById("checkboxes");

  if (!expanded) {

    checkboxes.style.display = "block";

    expanded = true;

  } else {

    checkboxes.style.display = "none";

    expanded = false;

  }

}

.multiselect {

  width: 200px;

}



.selectBox {

  position: relative;

}



.selectBox select {

  width: 100%;

  font-weight: bold;

}



.overSelect {

  position: absolute;

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

}



#checkboxes {

  display: none;

  border: 1px #dadada solid;

}



#checkboxes label {

  display: block;

}



#checkboxes label:hover {

  background-color: #1e90ff;

}

<form>

  <div class="multiselect">

    <div class="selectBox" onclick="showCheckboxes()">

      <select>

        <option>Select an option</option>

      </select>

      <div class="overSelect"></div>

    </div>

    <div id="checkboxes">

      <label for="one">

        <input type="checkbox" id="one" />First checkbox</label>

      <label for="two">

        <input type="checkbox" id="two" />Second checkbox</label>

      <label for="three">

        <input type="checkbox" id="three" />Third checkbox</label>

    </div>

  </div>

</form>

edited Oct 10 '18 at 20:13

AAEM

726318

answered Oct 10 '18 at 19:28

i hate this

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f17714705%2fhow-to-use-checkbox-inside-select-option%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

8 Answers
8

active

oldest

votes

8 Answers
8

active

oldest

votes

142

You cannot place checkbox inside select element but you can get the same functionality by using HTML, CSS and JavaScript. Here is a possible working solution. The explanation follows.

enter image description here

Code:

var expanded = false;



function showCheckboxes() {

  var checkboxes = document.getElementById("checkboxes");

  if (!expanded) {

    checkboxes.style.display = "block";

    expanded = true;

  } else {

    checkboxes.style.display = "none";

    expanded = false;

  }

}

.multiselect {

  width: 200px;

}



.selectBox {

  position: relative;

}



.selectBox select {

  width: 100%;

  font-weight: bold;

}



.overSelect {

  position: absolute;

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

}



#checkboxes {

  display: none;

  border: 1px #dadada solid;

}



#checkboxes label {

  display: block;

}



#checkboxes label:hover {

  background-color: #1e90ff;

}

<form>

  <div class="multiselect">

    <div class="selectBox" onclick="showCheckboxes()">

      <select>

        <option>Select an option</option>

      </select>

      <div class="overSelect"></div>

    </div>

    <div id="checkboxes">

      <label for="one">

        <input type="checkbox" id="one" />First checkbox</label>

      <label for="two">

        <input type="checkbox" id="two" />Second checkbox</label>

      <label for="three">

        <input type="checkbox" id="three" />Third checkbox</label>

    </div>

  </div>

</form>

Explanation:

To add the functionality we specify a JavaScript function that is called when the user clicks on the div that contains our select element (<div class="selectBox" onclick="showCheckboxes()">).

The solution was tested in the following browsers: Internet Explorer 10, Firefox 34, Chrome 39. The browser needs to have JavaScript enabled.

More information:

CSS positioning

How to overlay one div over another div

http://www.w3schools.com/css/css_positioning.asp

CSS display property

http://www.w3schools.com/cssref/pr_class_display.asp

edited Mar 2 '18 at 11:47

Stephen Kennedy

7,159134967

answered Dec 18 '14 at 12:50

vitfo

5,42032025

FYI: This solution will require more effort if the more than one select list is required to be modified. I suggest going in for some actively maintained plugin.

– user216084
Feb 13 '15 at 12:47

1

Thank you ! Great job ! It's pure JS and ready to use. It's hard to find solution for that problem in net.

– atom
Mar 6 '15 at 8:47

1

This is good solution when don't want to use Jquery!!. Appreciative!!

– Power Star
Apr 13 '15 at 10:27

6

also to select box is not disappear when user select any options

– Pardeep Jain
Feb 1 '16 at 9:14

1

This answer is great and it worked for me. There is however one improvement I made on it. Instead of the overselect div that could potentially cause some problems in a complex interface I used <option selected hidden>Select an option</option>. It might not be the best use of hidden but it works.

– Syknapse
Apr 25 '18 at 8:24

|
show 6 more comments

142

You cannot place checkbox inside select element but you can get the same functionality by using HTML, CSS and JavaScript. Here is a possible working solution. The explanation follows.

enter image description here

Code:

var expanded = false;



function showCheckboxes() {

  var checkboxes = document.getElementById("checkboxes");

  if (!expanded) {

    checkboxes.style.display = "block";

    expanded = true;

  } else {

    checkboxes.style.display = "none";

    expanded = false;

  }

}

.multiselect {

  width: 200px;

}



.selectBox {

  position: relative;

}



.selectBox select {

  width: 100%;

  font-weight: bold;

}



.overSelect {

  position: absolute;

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

}



#checkboxes {

  display: none;

  border: 1px #dadada solid;

}



#checkboxes label {

  display: block;

}



#checkboxes label:hover {

  background-color: #1e90ff;

}

<form>

  <div class="multiselect">

    <div class="selectBox" onclick="showCheckboxes()">

      <select>

        <option>Select an option</option>

      </select>

      <div class="overSelect"></div>

    </div>

    <div id="checkboxes">

      <label for="one">

        <input type="checkbox" id="one" />First checkbox</label>

      <label for="two">

        <input type="checkbox" id="two" />Second checkbox</label>

      <label for="three">

        <input type="checkbox" id="three" />Third checkbox</label>

    </div>

  </div>

</form>

Explanation:

To add the functionality we specify a JavaScript function that is called when the user clicks on the div that contains our select element (<div class="selectBox" onclick="showCheckboxes()">).

The solution was tested in the following browsers: Internet Explorer 10, Firefox 34, Chrome 39. The browser needs to have JavaScript enabled.

More information:

CSS positioning

How to overlay one div over another div

http://www.w3schools.com/css/css_positioning.asp

CSS display property

http://www.w3schools.com/cssref/pr_class_display.asp

edited Mar 2 '18 at 11:47

Stephen Kennedy

7,159134967

answered Dec 18 '14 at 12:50

vitfo

5,42032025

FYI: This solution will require more effort if the more than one select list is required to be modified. I suggest going in for some actively maintained plugin.

– user216084
Feb 13 '15 at 12:47

1

Thank you ! Great job ! It's pure JS and ready to use. It's hard to find solution for that problem in net.

– atom
Mar 6 '15 at 8:47

1

This is good solution when don't want to use Jquery!!. Appreciative!!

– Power Star
Apr 13 '15 at 10:27

6

also to select box is not disappear when user select any options

– Pardeep Jain
Feb 1 '16 at 9:14

1

This answer is great and it worked for me. There is however one improvement I made on it. Instead of the overselect div that could potentially cause some problems in a complex interface I used <option selected hidden>Select an option</option>. It might not be the best use of hidden but it works.

– Syknapse
Apr 25 '18 at 8:24

|
show 6 more comments

142

You cannot place checkbox inside select element but you can get the same functionality by using HTML, CSS and JavaScript. Here is a possible working solution. The explanation follows.

enter image description here

Code:

var expanded = false;



function showCheckboxes() {

  var checkboxes = document.getElementById("checkboxes");

  if (!expanded) {

    checkboxes.style.display = "block";

    expanded = true;

  } else {

    checkboxes.style.display = "none";

    expanded = false;

  }

}

.multiselect {

  width: 200px;

}



.selectBox {

  position: relative;

}



.selectBox select {

  width: 100%;

  font-weight: bold;

}



.overSelect {

  position: absolute;

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

}



#checkboxes {

  display: none;

  border: 1px #dadada solid;

}



#checkboxes label {

  display: block;

}



#checkboxes label:hover {

  background-color: #1e90ff;

}

<form>

  <div class="multiselect">

    <div class="selectBox" onclick="showCheckboxes()">

      <select>

        <option>Select an option</option>

      </select>

      <div class="overSelect"></div>

    </div>

    <div id="checkboxes">

      <label for="one">

        <input type="checkbox" id="one" />First checkbox</label>

      <label for="two">

        <input type="checkbox" id="two" />Second checkbox</label>

      <label for="three">

        <input type="checkbox" id="three" />Third checkbox</label>

    </div>

  </div>

</form>

Explanation:

To add the functionality we specify a JavaScript function that is called when the user clicks on the div that contains our select element (<div class="selectBox" onclick="showCheckboxes()">).

The solution was tested in the following browsers: Internet Explorer 10, Firefox 34, Chrome 39. The browser needs to have JavaScript enabled.

More information:

CSS positioning

How to overlay one div over another div

http://www.w3schools.com/css/css_positioning.asp

CSS display property

http://www.w3schools.com/cssref/pr_class_display.asp

edited Mar 2 '18 at 11:47

Stephen Kennedy

7,159134967

answered Dec 18 '14 at 12:50

vitfo

5,42032025

You cannot place checkbox inside select element but you can get the same functionality by using HTML, CSS and JavaScript. Here is a possible working solution. The explanation follows.

enter image description here

Code:

var expanded = false;



function showCheckboxes() {

  var checkboxes = document.getElementById("checkboxes");

  if (!expanded) {

    checkboxes.style.display = "block";

    expanded = true;

  } else {

    checkboxes.style.display = "none";

    expanded = false;

  }

}

.multiselect {

  width: 200px;

}



.selectBox {

  position: relative;

}



.selectBox select {

  width: 100%;

  font-weight: bold;

}



.overSelect {

  position: absolute;

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

}



#checkboxes {

  display: none;

  border: 1px #dadada solid;

}



#checkboxes label {

  display: block;

}



#checkboxes label:hover {

  background-color: #1e90ff;

}

<form>

  <div class="multiselect">

    <div class="selectBox" onclick="showCheckboxes()">

      <select>

        <option>Select an option</option>

      </select>

      <div class="overSelect"></div>

    </div>

    <div id="checkboxes">

      <label for="one">

        <input type="checkbox" id="one" />First checkbox</label>

      <label for="two">

        <input type="checkbox" id="two" />Second checkbox</label>

      <label for="three">

        <input type="checkbox" id="three" />Third checkbox</label>

    </div>

  </div>

</form>

Explanation:

To add the functionality we specify a JavaScript function that is called when the user clicks on the div that contains our select element (<div class="selectBox" onclick="showCheckboxes()">).

The solution was tested in the following browsers: Internet Explorer 10, Firefox 34, Chrome 39. The browser needs to have JavaScript enabled.

More information:

CSS positioning

How to overlay one div over another div

http://www.w3schools.com/css/css_positioning.asp

CSS display property

http://www.w3schools.com/cssref/pr_class_display.asp

var expanded = false;



function showCheckboxes() {

  var checkboxes = document.getElementById("checkboxes");

  if (!expanded) {

    checkboxes.style.display = "block";

    expanded = true;

  } else {

    checkboxes.style.display = "none";

    expanded = false;

  }

}

.multiselect {

  width: 200px;

}



.selectBox {

  position: relative;

}



.selectBox select {

  width: 100%;

  font-weight: bold;

}



.overSelect {

  position: absolute;

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

}



#checkboxes {

  display: none;

  border: 1px #dadada solid;

}



#checkboxes label {

  display: block;

}



#checkboxes label:hover {

  background-color: #1e90ff;

}

<form>

  <div class="multiselect">

    <div class="selectBox" onclick="showCheckboxes()">

      <select>

        <option>Select an option</option>

      </select>

      <div class="overSelect"></div>

    </div>

    <div id="checkboxes">

      <label for="one">

        <input type="checkbox" id="one" />First checkbox</label>

      <label for="two">

        <input type="checkbox" id="two" />Second checkbox</label>

      <label for="three">

        <input type="checkbox" id="three" />Third checkbox</label>

    </div>

  </div>

</form>

var expanded = false;



function showCheckboxes() {

  var checkboxes = document.getElementById("checkboxes");

  if (!expanded) {

    checkboxes.style.display = "block";

    expanded = true;

  } else {

    checkboxes.style.display = "none";

    expanded = false;

  }

}

.multiselect {

  width: 200px;

}



.selectBox {

  position: relative;

}



.selectBox select {

  width: 100%;

  font-weight: bold;

}



.overSelect {

  position: absolute;

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

}



#checkboxes {

  display: none;

  border: 1px #dadada solid;

}



#checkboxes label {

  display: block;

}



#checkboxes label:hover {

  background-color: #1e90ff;

}

<form>

  <div class="multiselect">

    <div class="selectBox" onclick="showCheckboxes()">

      <select>

        <option>Select an option</option>

      </select>

      <div class="overSelect"></div>

    </div>

    <div id="checkboxes">

      <label for="one">

        <input type="checkbox" id="one" />First checkbox</label>

      <label for="two">

        <input type="checkbox" id="two" />Second checkbox</label>

      <label for="three">

        <input type="checkbox" id="three" />Third checkbox</label>

    </div>

  </div>

</form>

edited Mar 2 '18 at 11:47

Stephen Kennedy

7,159134967

answered Dec 18 '14 at 12:50

vitfo

5,42032025

edited Mar 2 '18 at 11:47

Stephen Kennedy

7,159134967

edited Mar 2 '18 at 11:47

Stephen Kennedy

7,159134967

edited Mar 2 '18 at 11:47

Stephen Kennedy

7,159134967

answered Dec 18 '14 at 12:50

vitfo

5,42032025

answered Dec 18 '14 at 12:50

vitfo

5,42032025

answered Dec 18 '14 at 12:50

vitfo

5,42032025

FYI: This solution will require more effort if the more than one select list is required to be modified. I suggest going in for some actively maintained plugin.

– user216084
Feb 13 '15 at 12:47

1

Thank you ! Great job ! It's pure JS and ready to use. It's hard to find solution for that problem in net.

– atom
Mar 6 '15 at 8:47

1

This is good solution when don't want to use Jquery!!. Appreciative!!

– Power Star
Apr 13 '15 at 10:27

6

also to select box is not disappear when user select any options

– Pardeep Jain
Feb 1 '16 at 9:14

1

This answer is great and it worked for me. There is however one improvement I made on it. Instead of the overselect div that could potentially cause some problems in a complex interface I used <option selected hidden>Select an option</option>. It might not be the best use of hidden but it works.

– Syknapse
Apr 25 '18 at 8:24

|
show 6 more comments

FYI: This solution will require more effort if the more than one select list is required to be modified. I suggest going in for some actively maintained plugin.

– user216084
Feb 13 '15 at 12:47

1

Thank you ! Great job ! It's pure JS and ready to use. It's hard to find solution for that problem in net.

– atom
Mar 6 '15 at 8:47

1

This is good solution when don't want to use Jquery!!. Appreciative!!

– Power Star
Apr 13 '15 at 10:27

6

also to select box is not disappear when user select any options

– Pardeep Jain
Feb 1 '16 at 9:14

1

This answer is great and it worked for me. There is however one improvement I made on it. Instead of the overselect div that could potentially cause some problems in a complex interface I used <option selected hidden>Select an option</option>. It might not be the best use of hidden but it works.

– Syknapse
Apr 25 '18 at 8:24

FYI: This solution will require more effort if the more than one select list is required to be modified. I suggest going in for some actively maintained plugin.

– user216084
Feb 13 '15 at 12:47

Thank you ! Great job ! It's pure JS and ready to use. It's hard to find solution for that problem in net.

– atom
Mar 6 '15 at 8:47

This is good solution when don't want to use Jquery!!. Appreciative!!

– Power Star
Apr 13 '15 at 10:27

also to select box is not disappear when user select any options

– Pardeep Jain
Feb 1 '16 at 9:14

This answer is great and it worked for me. There is however one improvement I made on it. Instead of the overselect div that could potentially cause some problems in a complex interface I used <option selected hidden>Select an option</option>. It might not be the best use of hidden but it works.

– Syknapse
Apr 25 '18 at 8:24

|
show 6 more comments

The best plugin so far is Bootstrap Multiselect

<html xmlns="http://www.w3.org/1999/xhtml">

<head>



<title>jQuery Multi Select Dropdown with Checkboxes</title>



<link rel="stylesheet" href="css/bootstrap-3.1.1.min.css" type="text/css" />

<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css" />



<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>

<script type="text/javascript" src="js/bootstrap-3.1.1.min.js"></script>

<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>



</head>



<body>



<form id="form1">



<div style="padding:20px">



<select id="chkveg" multiple="multiple">



    <option value="cheese">Cheese</option>

    <option value="tomatoes">Tomatoes</option>

    <option value="mozarella">Mozzarella</option>

    <option value="mushrooms">Mushrooms</option>

    <option value="pepperoni">Pepperoni</option>

    <option value="onions">Onions</option>



</select>



<br /><br />



<input type="button" id="btnget" value="Get Selected Values" />



<script type="text/javascript">



$(function() {



    $('#chkveg').multiselect({



        includeSelectAllOption: true

    });



    $('#btnget').click(function(){



        alert($('#chkveg').val());

    });

});



</script>



</div>



</form>



</body>

</html>

Here's the DEMO

edited Mar 20 '18 at 7:24

answered Aug 20 '14 at 21:42

pmrotule

4,03923339

You need not to use these much of libraries for your solution. You can just use regular HTML Multiple select option. Thanks!

– Power Star
Apr 13 '15 at 10:22

3

I know I can use HTML multiple select option, but I found it ugly and not user friendly.

– pmrotule
Apr 13 '15 at 20:26

3

I like this plugin's behaviour, but want to use it without bootstrap... anything similar?

– singpolyma
Feb 2 '16 at 20:38

this plugin is so buggy... they have 150 open issues and maintainer said that he doesn't have time. so after some issues I switched to the accepted answer and vue

– Oleg Abrazhaev
Nov 15 '17 at 16:56

1

@Erbureth The external script/stylesheet paths were outdated in the demo (dead links). I updated the urls to fix it.

– pmrotule
Mar 20 '18 at 7:28

|
show 1 more comment

The best plugin so far is Bootstrap Multiselect

<html xmlns="http://www.w3.org/1999/xhtml">

<head>



<title>jQuery Multi Select Dropdown with Checkboxes</title>



<link rel="stylesheet" href="css/bootstrap-3.1.1.min.css" type="text/css" />

<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css" />



<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>

<script type="text/javascript" src="js/bootstrap-3.1.1.min.js"></script>

<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>



</head>



<body>



<form id="form1">



<div style="padding:20px">



<select id="chkveg" multiple="multiple">



    <option value="cheese">Cheese</option>

    <option value="tomatoes">Tomatoes</option>

    <option value="mozarella">Mozzarella</option>

    <option value="mushrooms">Mushrooms</option>

    <option value="pepperoni">Pepperoni</option>

    <option value="onions">Onions</option>



</select>



<br /><br />



<input type="button" id="btnget" value="Get Selected Values" />



<script type="text/javascript">



$(function() {



    $('#chkveg').multiselect({



        includeSelectAllOption: true

    });



    $('#btnget').click(function(){



        alert($('#chkveg').val());

    });

});



</script>



</div>



</form>



</body>

</html>

Here's the DEMO

edited Mar 20 '18 at 7:24

answered Aug 20 '14 at 21:42

pmrotule

4,03923339

You need not to use these much of libraries for your solution. You can just use regular HTML Multiple select option. Thanks!

– Power Star
Apr 13 '15 at 10:22

3

I know I can use HTML multiple select option, but I found it ugly and not user friendly.

– pmrotule
Apr 13 '15 at 20:26

3

I like this plugin's behaviour, but want to use it without bootstrap... anything similar?

– singpolyma
Feb 2 '16 at 20:38

this plugin is so buggy... they have 150 open issues and maintainer said that he doesn't have time. so after some issues I switched to the accepted answer and vue

– Oleg Abrazhaev
Nov 15 '17 at 16:56

1

@Erbureth The external script/stylesheet paths were outdated in the demo (dead links). I updated the urls to fix it.

– pmrotule
Mar 20 '18 at 7:28

|
show 1 more comment

The best plugin so far is Bootstrap Multiselect

<html xmlns="http://www.w3.org/1999/xhtml">

<head>



<title>jQuery Multi Select Dropdown with Checkboxes</title>



<link rel="stylesheet" href="css/bootstrap-3.1.1.min.css" type="text/css" />

<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css" />



<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>

<script type="text/javascript" src="js/bootstrap-3.1.1.min.js"></script>

<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>



</head>



<body>



<form id="form1">



<div style="padding:20px">



<select id="chkveg" multiple="multiple">



    <option value="cheese">Cheese</option>

    <option value="tomatoes">Tomatoes</option>

    <option value="mozarella">Mozzarella</option>

    <option value="mushrooms">Mushrooms</option>

    <option value="pepperoni">Pepperoni</option>

    <option value="onions">Onions</option>



</select>



<br /><br />



<input type="button" id="btnget" value="Get Selected Values" />



<script type="text/javascript">



$(function() {



    $('#chkveg').multiselect({



        includeSelectAllOption: true

    });



    $('#btnget').click(function(){



        alert($('#chkveg').val());

    });

});



</script>



</div>



</form>



</body>

</html>

Here's the DEMO

edited Mar 20 '18 at 7:24

answered Aug 20 '14 at 21:42

pmrotule

4,03923339

The best plugin so far is Bootstrap Multiselect

<html xmlns="http://www.w3.org/1999/xhtml">

<head>



<title>jQuery Multi Select Dropdown with Checkboxes</title>



<link rel="stylesheet" href="css/bootstrap-3.1.1.min.css" type="text/css" />

<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css" />



<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>

<script type="text/javascript" src="js/bootstrap-3.1.1.min.js"></script>

<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>



</head>



<body>



<form id="form1">



<div style="padding:20px">



<select id="chkveg" multiple="multiple">



    <option value="cheese">Cheese</option>

    <option value="tomatoes">Tomatoes</option>

    <option value="mozarella">Mozzarella</option>

    <option value="mushrooms">Mushrooms</option>

    <option value="pepperoni">Pepperoni</option>

    <option value="onions">Onions</option>



</select>



<br /><br />



<input type="button" id="btnget" value="Get Selected Values" />



<script type="text/javascript">



$(function() {



    $('#chkveg').multiselect({



        includeSelectAllOption: true

    });



    $('#btnget').click(function(){



        alert($('#chkveg').val());

    });

});



</script>



</div>



</form>



</body>

</html>

Here's the DEMO

edited Mar 20 '18 at 7:24

answered Aug 20 '14 at 21:42

pmrotule

4,03923339

edited Mar 20 '18 at 7:24

answered Aug 20 '14 at 21:42

pmrotule

4,03923339

answered Aug 20 '14 at 21:42

pmrotule

4,03923339

answered Aug 20 '14 at 21:42

pmrotule

4,03923339

You need not to use these much of libraries for your solution. You can just use regular HTML Multiple select option. Thanks!

– Power Star
Apr 13 '15 at 10:22

3

I know I can use HTML multiple select option, but I found it ugly and not user friendly.

– pmrotule
Apr 13 '15 at 20:26

3

I like this plugin's behaviour, but want to use it without bootstrap... anything similar?

– singpolyma
Feb 2 '16 at 20:38

this plugin is so buggy... they have 150 open issues and maintainer said that he doesn't have time. so after some issues I switched to the accepted answer and vue

– Oleg Abrazhaev
Nov 15 '17 at 16:56

1

@Erbureth The external script/stylesheet paths were outdated in the demo (dead links). I updated the urls to fix it.

– pmrotule
Mar 20 '18 at 7:28

|
show 1 more comment

You need not to use these much of libraries for your solution. You can just use regular HTML Multiple select option. Thanks!

– Power Star
Apr 13 '15 at 10:22

3

I know I can use HTML multiple select option, but I found it ugly and not user friendly.

– pmrotule
Apr 13 '15 at 20:26

3

I like this plugin's behaviour, but want to use it without bootstrap... anything similar?

– singpolyma
Feb 2 '16 at 20:38

this plugin is so buggy... they have 150 open issues and maintainer said that he doesn't have time. so after some issues I switched to the accepted answer and vue

– Oleg Abrazhaev
Nov 15 '17 at 16:56

1

@Erbureth The external script/stylesheet paths were outdated in the demo (dead links). I updated the urls to fix it.

– pmrotule
Mar 20 '18 at 7:28

You need not to use these much of libraries for your solution. You can just use regular HTML Multiple select option. Thanks!

– Power Star
Apr 13 '15 at 10:22

I know I can use HTML multiple select option, but I found it ugly and not user friendly.

– pmrotule
Apr 13 '15 at 20:26

I like this plugin's behaviour, but want to use it without bootstrap... anything similar?

– singpolyma
Feb 2 '16 at 20:38

this plugin is so buggy... they have 150 open issues and maintainer said that he doesn't have time. so after some issues I switched to the accepted answer and vue

– Oleg Abrazhaev
Nov 15 '17 at 16:56

@Erbureth The external script/stylesheet paths were outdated in the demo (dead links). I updated the urls to fix it.

– pmrotule
Mar 20 '18 at 7:28

|
show 1 more comment

Try multiple-select. Looks to be much clean and managed solution, with tons of examples.

answered Apr 11 '15 at 1:55

Azghanvi

320313

add a comment |

Try multiple-select. Looks to be much clean and managed solution, with tons of examples.

answered Apr 11 '15 at 1:55

Azghanvi

320313

add a comment |

Try multiple-select. Looks to be much clean and managed solution, with tons of examples.

answered Apr 11 '15 at 1:55

Azghanvi

320313

Try multiple-select. Looks to be much clean and managed solution, with tons of examples.

answered Apr 11 '15 at 1:55

Azghanvi

320313

answered Apr 11 '15 at 1:55

Azghanvi

320313

answered Apr 11 '15 at 1:55

Azghanvi

320313

answered Apr 11 '15 at 1:55

Azghanvi

320313

add a comment |

For a Pure CSS approach, you can use the :checked selector combined with the ::before selector to inline conditional content.

Just add the class select-checkbox to your select element and include the following CSS:

.select-checkbox option::before {

  content: "2610";

  width: 1.3em;

  text-align: center;

  display: inline-block;

}

.select-checkbox option:checked::before {

  content: "2611";

}

You can use plain old unicode characters (with an escaped hex encoding) like these:

☐ Ballot Box - 2610

☑ Ballot Box With Check - 2611

Or if you want to spice things up, you can use these FontAwesome glyphs

.fa-square-o - f096

.fa-check-square-o - f046

Screenshot

Demo in jsFiddle & Stack Snippets

select {

  width: 150px;

}



.select-checkbox option::before {

  content: "2610";

  width: 1.3em;

  text-align: center;

  display: inline-block;

}

.select-checkbox option:checked::before {

  content: "2611";

}



.select-checkbox-fa option::before {

  font-family: FontAwesome;

  content: "f096";

  width: 1.3em;

  display: inline-block;

  margin-left: 2px;

}

.select-checkbox-fa option:checked::before {

  content: "f046";

}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">



<h3>Unicode</h3>

<select multiple="" class="form-control select-checkbox" size="5">

  <option>Dog</option>

  <option>Cat</option>

  <option>Hippo</option>

  <option>Dinosaur</option>

  <option>Another Dog</option>

</select>



<h3>Font Awesome</h3>

<select multiple="" class="form-control select-checkbox-fa" size="5">

  <option>Dog</option>

  <option>Cat</option>

  <option>Hippo</option>

  <option>Dinosaur</option>

  <option>Another Dog</option>

</select>

Note: Beware of IE compatibility issues however

answered Feb 13 '18 at 21:34

KyleMit

57.8k34238395

1

It's a problem when the multiple attribute makes the <select> look like a box instead of a dropdown...

– vsync
Apr 17 '18 at 8:23

@vsync, can you elaborate on what problem you're having, maybe even fork the fiddle and include a screenshot. The goal here is to apply to a <select multiple> element, so that should be the intended use case. The CSS selectors should be specific to applying that class so you decide to use on individual elements by applying the .select-checkbox class

– KyleMit
Apr 17 '18 at 15:02

1

Highly recommend this elegant solution if you're looking for a pure CSS approach.

– Anish Sana
Jun 18 '18 at 16:55

add a comment |

For a Pure CSS approach, you can use the :checked selector combined with the ::before selector to inline conditional content.

Just add the class select-checkbox to your select element and include the following CSS:

.select-checkbox option::before {

  content: "2610";

  width: 1.3em;

  text-align: center;

  display: inline-block;

}

.select-checkbox option:checked::before {

  content: "2611";

}

You can use plain old unicode characters (with an escaped hex encoding) like these:

☐ Ballot Box - 2610

☑ Ballot Box With Check - 2611

Or if you want to spice things up, you can use these FontAwesome glyphs

.fa-square-o - f096

.fa-check-square-o - f046

Screenshot

Demo in jsFiddle & Stack Snippets

select {

  width: 150px;

}



.select-checkbox option::before {

  content: "2610";

  width: 1.3em;

  text-align: center;

  display: inline-block;

}

.select-checkbox option:checked::before {

  content: "2611";

}



.select-checkbox-fa option::before {

  font-family: FontAwesome;

  content: "f096";

  width: 1.3em;

  display: inline-block;

  margin-left: 2px;

}

.select-checkbox-fa option:checked::before {

  content: "f046";

}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">



<h3>Unicode</h3>

<select multiple="" class="form-control select-checkbox" size="5">

  <option>Dog</option>

  <option>Cat</option>

  <option>Hippo</option>

  <option>Dinosaur</option>

  <option>Another Dog</option>

</select>



<h3>Font Awesome</h3>

<select multiple="" class="form-control select-checkbox-fa" size="5">

  <option>Dog</option>

  <option>Cat</option>

  <option>Hippo</option>

  <option>Dinosaur</option>

  <option>Another Dog</option>

</select>

Note: Beware of IE compatibility issues however

answered Feb 13 '18 at 21:34

KyleMit

57.8k34238395

1

It's a problem when the multiple attribute makes the <select> look like a box instead of a dropdown...

– vsync
Apr 17 '18 at 8:23

@vsync, can you elaborate on what problem you're having, maybe even fork the fiddle and include a screenshot. The goal here is to apply to a <select multiple> element, so that should be the intended use case. The CSS selectors should be specific to applying that class so you decide to use on individual elements by applying the .select-checkbox class

– KyleMit
Apr 17 '18 at 15:02

1

Highly recommend this elegant solution if you're looking for a pure CSS approach.

– Anish Sana
Jun 18 '18 at 16:55

add a comment |

For a Pure CSS approach, you can use the :checked selector combined with the ::before selector to inline conditional content.

Just add the class select-checkbox to your select element and include the following CSS:

.select-checkbox option::before {

  content: "2610";

  width: 1.3em;

  text-align: center;

  display: inline-block;

}

.select-checkbox option:checked::before {

  content: "2611";

}

You can use plain old unicode characters (with an escaped hex encoding) like these:

☐ Ballot Box - 2610

☑ Ballot Box With Check - 2611

Or if you want to spice things up, you can use these FontAwesome glyphs

.fa-square-o - f096

.fa-check-square-o - f046

Screenshot

Demo in jsFiddle & Stack Snippets

select {

  width: 150px;

}



.select-checkbox option::before {

  content: "2610";

  width: 1.3em;

  text-align: center;

  display: inline-block;

}

.select-checkbox option:checked::before {

  content: "2611";

}



.select-checkbox-fa option::before {

  font-family: FontAwesome;

  content: "f096";

  width: 1.3em;

  display: inline-block;

  margin-left: 2px;

}

.select-checkbox-fa option:checked::before {

  content: "f046";

}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">



<h3>Unicode</h3>

<select multiple="" class="form-control select-checkbox" size="5">

  <option>Dog</option>

  <option>Cat</option>

  <option>Hippo</option>

  <option>Dinosaur</option>

  <option>Another Dog</option>

</select>



<h3>Font Awesome</h3>

<select multiple="" class="form-control select-checkbox-fa" size="5">

  <option>Dog</option>

  <option>Cat</option>

  <option>Hippo</option>

  <option>Dinosaur</option>

  <option>Another Dog</option>

</select>

Note: Beware of IE compatibility issues however

answered Feb 13 '18 at 21:34

KyleMit

57.8k34238395

For a Pure CSS approach, you can use the :checked selector combined with the ::before selector to inline conditional content.

Just add the class select-checkbox to your select element and include the following CSS:

.select-checkbox option::before {

  content: "2610";

  width: 1.3em;

  text-align: center;

  display: inline-block;

}

.select-checkbox option:checked::before {

  content: "2611";

}

You can use plain old unicode characters (with an escaped hex encoding) like these:

☐ Ballot Box - 2610

☑ Ballot Box With Check - 2611

Or if you want to spice things up, you can use these FontAwesome glyphs

.fa-square-o - f096

.fa-check-square-o - f046

Screenshot

Demo in jsFiddle & Stack Snippets

select {

  width: 150px;

}



.select-checkbox option::before {

  content: "2610";

  width: 1.3em;

  text-align: center;

  display: inline-block;

}

.select-checkbox option:checked::before {

  content: "2611";

}



.select-checkbox-fa option::before {

  font-family: FontAwesome;

  content: "f096";

  width: 1.3em;

  display: inline-block;

  margin-left: 2px;

}

.select-checkbox-fa option:checked::before {

  content: "f046";

}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">



<h3>Unicode</h3>

<select multiple="" class="form-control select-checkbox" size="5">

  <option>Dog</option>

  <option>Cat</option>

  <option>Hippo</option>

  <option>Dinosaur</option>

  <option>Another Dog</option>

</select>



<h3>Font Awesome</h3>

<select multiple="" class="form-control select-checkbox-fa" size="5">

  <option>Dog</option>

  <option>Cat</option>

  <option>Hippo</option>

  <option>Dinosaur</option>

  <option>Another Dog</option>

</select>

Note: Beware of IE compatibility issues however

select {

  width: 150px;

}



.select-checkbox option::before {

  content: "2610";

  width: 1.3em;

  text-align: center;

  display: inline-block;

}

.select-checkbox option:checked::before {

  content: "2611";

}



.select-checkbox-fa option::before {

  font-family: FontAwesome;

  content: "f096";

  width: 1.3em;

  display: inline-block;

  margin-left: 2px;

}

.select-checkbox-fa option:checked::before {

  content: "f046";

}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">



<h3>Unicode</h3>

<select multiple="" class="form-control select-checkbox" size="5">

  <option>Dog</option>

  <option>Cat</option>

  <option>Hippo</option>

  <option>Dinosaur</option>

  <option>Another Dog</option>

</select>



<h3>Font Awesome</h3>

<select multiple="" class="form-control select-checkbox-fa" size="5">

  <option>Dog</option>

  <option>Cat</option>

  <option>Hippo</option>

  <option>Dinosaur</option>

  <option>Another Dog</option>

</select>

select {

  width: 150px;

}



.select-checkbox option::before {

  content: "2610";

  width: 1.3em;

  text-align: center;

  display: inline-block;

}

.select-checkbox option:checked::before {

  content: "2611";

}



.select-checkbox-fa option::before {

  font-family: FontAwesome;

  content: "f096";

  width: 1.3em;

  display: inline-block;

  margin-left: 2px;

}

.select-checkbox-fa option:checked::before {

  content: "f046";

}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">



<h3>Unicode</h3>

<select multiple="" class="form-control select-checkbox" size="5">

  <option>Dog</option>

  <option>Cat</option>

  <option>Hippo</option>

  <option>Dinosaur</option>

  <option>Another Dog</option>

</select>



<h3>Font Awesome</h3>

<select multiple="" class="form-control select-checkbox-fa" size="5">

  <option>Dog</option>

  <option>Cat</option>

  <option>Hippo</option>

  <option>Dinosaur</option>

  <option>Another Dog</option>

</select>

answered Feb 13 '18 at 21:34

KyleMit

57.8k34238395

answered Feb 13 '18 at 21:34

KyleMit

57.8k34238395

answered Feb 13 '18 at 21:34

KyleMit

57.8k34238395

answered Feb 13 '18 at 21:34

KyleMit

57.8k34238395

1

It's a problem when the multiple attribute makes the <select> look like a box instead of a dropdown...

– vsync
Apr 17 '18 at 8:23

@vsync, can you elaborate on what problem you're having, maybe even fork the fiddle and include a screenshot. The goal here is to apply to a <select multiple> element, so that should be the intended use case. The CSS selectors should be specific to applying that class so you decide to use on individual elements by applying the .select-checkbox class

– KyleMit
Apr 17 '18 at 15:02

1

Highly recommend this elegant solution if you're looking for a pure CSS approach.

– Anish Sana
Jun 18 '18 at 16:55

add a comment |

1

It's a problem when the multiple attribute makes the <select> look like a box instead of a dropdown...

– vsync
Apr 17 '18 at 8:23

@vsync, can you elaborate on what problem you're having, maybe even fork the fiddle and include a screenshot. The goal here is to apply to a <select multiple> element, so that should be the intended use case. The CSS selectors should be specific to applying that class so you decide to use on individual elements by applying the .select-checkbox class

– KyleMit
Apr 17 '18 at 15:02

1

Highly recommend this elegant solution if you're looking for a pure CSS approach.

– Anish Sana
Jun 18 '18 at 16:55

It's a problem when the multiple attribute makes the <select> look like a box instead of a dropdown...

– vsync
Apr 17 '18 at 8:23

@vsync, can you elaborate on what problem you're having, maybe even fork the fiddle and include a screenshot. The goal here is to apply to a <select multiple> element, so that should be the intended use case. The CSS selectors should be specific to applying that class so you decide to use on individual elements by applying the .select-checkbox class

– KyleMit
Apr 17 '18 at 15:02

Highly recommend this elegant solution if you're looking for a pure CSS approach.

– Anish Sana
Jun 18 '18 at 16:55

add a comment |

You can use this library on git for this purpose
https://github.com/ehynds/jquery-ui-multiselect-widget

for initiating the selectbox use this

    $("#selectBoxId").multiselect().multiselectfilter();

and when you have the data ready in json (from ajax or any method), first parse the data & then assign the js array to it

    var js_arr = $.parseJSON(/*data from ajax*/);

    $("#selectBoxId").val(js_arr);

    $("#selectBoxId").multiselect("refresh");

answered Apr 5 '18 at 5:15

Jaya Parwani

9216

add a comment |

You can use this library on git for this purpose
https://github.com/ehynds/jquery-ui-multiselect-widget

for initiating the selectbox use this

    $("#selectBoxId").multiselect().multiselectfilter();

and when you have the data ready in json (from ajax or any method), first parse the data & then assign the js array to it

    var js_arr = $.parseJSON(/*data from ajax*/);

    $("#selectBoxId").val(js_arr);

    $("#selectBoxId").multiselect("refresh");

answered Apr 5 '18 at 5:15

Jaya Parwani

9216

add a comment |

You can use this library on git for this purpose
https://github.com/ehynds/jquery-ui-multiselect-widget

for initiating the selectbox use this

    $("#selectBoxId").multiselect().multiselectfilter();

and when you have the data ready in json (from ajax or any method), first parse the data & then assign the js array to it

    var js_arr = $.parseJSON(/*data from ajax*/);

    $("#selectBoxId").val(js_arr);

    $("#selectBoxId").multiselect("refresh");

answered Apr 5 '18 at 5:15

Jaya Parwani

9216

You can use this library on git for this purpose
https://github.com/ehynds/jquery-ui-multiselect-widget

for initiating the selectbox use this

    $("#selectBoxId").multiselect().multiselectfilter();

and when you have the data ready in json (from ajax or any method), first parse the data & then assign the js array to it

    var js_arr = $.parseJSON(/*data from ajax*/);

    $("#selectBoxId").val(js_arr);

    $("#selectBoxId").multiselect("refresh");

answered Apr 5 '18 at 5:15

Jaya Parwani

9216

answered Apr 5 '18 at 5:15

Jaya Parwani

9216

answered Apr 5 '18 at 5:15

Jaya Parwani

9216

answered Apr 5 '18 at 5:15

Jaya Parwani

9216

add a comment |

Use this code for checkbox list on option menu.

.dropdown-menu input {

   margin-right: 10px;

}

<div class="btn-group">

    <a href="#" class="btn btn-primary"><i class="fa fa-cogs"></i></a>

    <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">

      <span class="caret"></span>

    </a>

    <ul class="dropdown-menu" style="padding: 10px" id="myDiv">

        <li><p><input type="checkbox" value="id1" > OA Number</p></li>

        <li><p><input type="checkbox" value="id2" >Customer</p></li>

        <li><p><input type="checkbox" value="id3" > OA Date</p></li>

        <li><p><input type="checkbox" value="id4" >Product Code</p></li>

        <li><p><input type="checkbox" value="id5" >Name</p></li>

        <li><p><input type="checkbox" value="id6" >WI Number</p></li>

        <li><p><input type="checkbox" value="id7" >WI QTY</p></li>

        <li><p><input type="checkbox" value="id8" >Production QTY</p></li>

        <li><p><input type="checkbox" value="id9" >PD Sr.No (from-to)</p></li>

        <li><p><input type="checkbox" value="id10" > Production Date</p></li>

        <button class="btn btn-info" onClick="showTable();">Go</button>

    </ul>

</div>

edited Sep 26 '18 at 12:31

KyleMit

57.8k34238395

answered Oct 31 '17 at 7:14

RSW

23638

For a fully fleshed out example on this basic approach of building a dropdown-menu with checkbox elements in each row, here's an answer for putting checkboxes in a Bootstrap dropdown

– KyleMit
Sep 26 '18 at 12:34

add a comment |

Use this code for checkbox list on option menu.

.dropdown-menu input {

   margin-right: 10px;

}

<div class="btn-group">

    <a href="#" class="btn btn-primary"><i class="fa fa-cogs"></i></a>

    <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">

      <span class="caret"></span>

    </a>

    <ul class="dropdown-menu" style="padding: 10px" id="myDiv">

        <li><p><input type="checkbox" value="id1" > OA Number</p></li>

        <li><p><input type="checkbox" value="id2" >Customer</p></li>

        <li><p><input type="checkbox" value="id3" > OA Date</p></li>

        <li><p><input type="checkbox" value="id4" >Product Code</p></li>

        <li><p><input type="checkbox" value="id5" >Name</p></li>

        <li><p><input type="checkbox" value="id6" >WI Number</p></li>

        <li><p><input type="checkbox" value="id7" >WI QTY</p></li>

        <li><p><input type="checkbox" value="id8" >Production QTY</p></li>

        <li><p><input type="checkbox" value="id9" >PD Sr.No (from-to)</p></li>

        <li><p><input type="checkbox" value="id10" > Production Date</p></li>

        <button class="btn btn-info" onClick="showTable();">Go</button>

    </ul>

</div>

edited Sep 26 '18 at 12:31

KyleMit

57.8k34238395

answered Oct 31 '17 at 7:14

RSW

23638

For a fully fleshed out example on this basic approach of building a dropdown-menu with checkbox elements in each row, here's an answer for putting checkboxes in a Bootstrap dropdown

– KyleMit
Sep 26 '18 at 12:34

add a comment |

Use this code for checkbox list on option menu.

.dropdown-menu input {

   margin-right: 10px;

}

<div class="btn-group">

    <a href="#" class="btn btn-primary"><i class="fa fa-cogs"></i></a>

    <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">

      <span class="caret"></span>

    </a>

    <ul class="dropdown-menu" style="padding: 10px" id="myDiv">

        <li><p><input type="checkbox" value="id1" > OA Number</p></li>

        <li><p><input type="checkbox" value="id2" >Customer</p></li>

        <li><p><input type="checkbox" value="id3" > OA Date</p></li>

        <li><p><input type="checkbox" value="id4" >Product Code</p></li>

        <li><p><input type="checkbox" value="id5" >Name</p></li>

        <li><p><input type="checkbox" value="id6" >WI Number</p></li>

        <li><p><input type="checkbox" value="id7" >WI QTY</p></li>

        <li><p><input type="checkbox" value="id8" >Production QTY</p></li>

        <li><p><input type="checkbox" value="id9" >PD Sr.No (from-to)</p></li>

        <li><p><input type="checkbox" value="id10" > Production Date</p></li>

        <button class="btn btn-info" onClick="showTable();">Go</button>

    </ul>

</div>

edited Sep 26 '18 at 12:31

KyleMit

57.8k34238395

answered Oct 31 '17 at 7:14

RSW

23638

Use this code for checkbox list on option menu.

.dropdown-menu input {

   margin-right: 10px;

}

<div class="btn-group">

    <a href="#" class="btn btn-primary"><i class="fa fa-cogs"></i></a>

    <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">

      <span class="caret"></span>

    </a>

    <ul class="dropdown-menu" style="padding: 10px" id="myDiv">

        <li><p><input type="checkbox" value="id1" > OA Number</p></li>

        <li><p><input type="checkbox" value="id2" >Customer</p></li>

        <li><p><input type="checkbox" value="id3" > OA Date</p></li>

        <li><p><input type="checkbox" value="id4" >Product Code</p></li>

        <li><p><input type="checkbox" value="id5" >Name</p></li>

        <li><p><input type="checkbox" value="id6" >WI Number</p></li>

        <li><p><input type="checkbox" value="id7" >WI QTY</p></li>

        <li><p><input type="checkbox" value="id8" >Production QTY</p></li>

        <li><p><input type="checkbox" value="id9" >PD Sr.No (from-to)</p></li>

        <li><p><input type="checkbox" value="id10" > Production Date</p></li>

        <button class="btn btn-info" onClick="showTable();">Go</button>

    </ul>

</div>

.dropdown-menu input {

   margin-right: 10px;

}

<div class="btn-group">

    <a href="#" class="btn btn-primary"><i class="fa fa-cogs"></i></a>

    <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">

      <span class="caret"></span>

    </a>

    <ul class="dropdown-menu" style="padding: 10px" id="myDiv">

        <li><p><input type="checkbox" value="id1" > OA Number</p></li>

        <li><p><input type="checkbox" value="id2" >Customer</p></li>

        <li><p><input type="checkbox" value="id3" > OA Date</p></li>

        <li><p><input type="checkbox" value="id4" >Product Code</p></li>

        <li><p><input type="checkbox" value="id5" >Name</p></li>

        <li><p><input type="checkbox" value="id6" >WI Number</p></li>

        <li><p><input type="checkbox" value="id7" >WI QTY</p></li>

        <li><p><input type="checkbox" value="id8" >Production QTY</p></li>

        <li><p><input type="checkbox" value="id9" >PD Sr.No (from-to)</p></li>

        <li><p><input type="checkbox" value="id10" > Production Date</p></li>

        <button class="btn btn-info" onClick="showTable();">Go</button>

    </ul>

</div>

.dropdown-menu input {

   margin-right: 10px;

}

<div class="btn-group">

    <a href="#" class="btn btn-primary"><i class="fa fa-cogs"></i></a>

    <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">

      <span class="caret"></span>

    </a>

    <ul class="dropdown-menu" style="padding: 10px" id="myDiv">

        <li><p><input type="checkbox" value="id1" > OA Number</p></li>

        <li><p><input type="checkbox" value="id2" >Customer</p></li>

        <li><p><input type="checkbox" value="id3" > OA Date</p></li>

        <li><p><input type="checkbox" value="id4" >Product Code</p></li>

        <li><p><input type="checkbox" value="id5" >Name</p></li>

        <li><p><input type="checkbox" value="id6" >WI Number</p></li>

        <li><p><input type="checkbox" value="id7" >WI QTY</p></li>

        <li><p><input type="checkbox" value="id8" >Production QTY</p></li>

        <li><p><input type="checkbox" value="id9" >PD Sr.No (from-to)</p></li>

        <li><p><input type="checkbox" value="id10" > Production Date</p></li>

        <button class="btn btn-info" onClick="showTable();">Go</button>

    </ul>

</div>

edited Sep 26 '18 at 12:31

KyleMit

57.8k34238395

answered Oct 31 '17 at 7:14

RSW

23638

edited Sep 26 '18 at 12:31

KyleMit

57.8k34238395

edited Sep 26 '18 at 12:31

KyleMit

57.8k34238395

edited Sep 26 '18 at 12:31

KyleMit

57.8k34238395

answered Oct 31 '17 at 7:14

RSW

23638

answered Oct 31 '17 at 7:14

RSW

23638

answered Oct 31 '17 at 7:14

RSW

23638

For a fully fleshed out example on this basic approach of building a dropdown-menu with checkbox elements in each row, here's an answer for putting checkboxes in a Bootstrap dropdown

– KyleMit
Sep 26 '18 at 12:34

add a comment |

For a fully fleshed out example on this basic approach of building a dropdown-menu with checkbox elements in each row, here's an answer for putting checkboxes in a Bootstrap dropdown

– KyleMit
Sep 26 '18 at 12:34

For a fully fleshed out example on this basic approach of building a dropdown-menu with checkbox elements in each row, here's an answer for putting checkboxes in a Bootstrap dropdown

– KyleMit
Sep 26 '18 at 12:34

add a comment |

Hope this will help you out.

Multiselect dropdown list and related js & css files

// This function should be called while loading page

var loadParentTaskList = function(){

    $.ajax({

        url: yoururl,

        method: 'POST',

        success: function(data){

            // To add options list coming from AJAX call multiselect

            for (var field in data) {

                $('<option value = "'+ data[field].name +'">' + data[field].name + '</option>').appendTo('#parent_task');

            }

   

            // To initiate the multiselect call 

            $("#parent_task").multiselect({

                includeSelectAllOption: true

            })

        }

    });

}

// Multiselect drop down list with id parent_task

<select id="parent_task" multiple="multiple">

</select>

edited Jan 15 '17 at 7:41

clearlight

8,65893858

answered Aug 18 '16 at 13:56

Yaswini Modupalli

add a comment |

Hope this will help you out.

Multiselect dropdown list and related js & css files

// This function should be called while loading page

var loadParentTaskList = function(){

    $.ajax({

        url: yoururl,

        method: 'POST',

        success: function(data){

            // To add options list coming from AJAX call multiselect

            for (var field in data) {

                $('<option value = "'+ data[field].name +'">' + data[field].name + '</option>').appendTo('#parent_task');

            }

   

            // To initiate the multiselect call 

            $("#parent_task").multiselect({

                includeSelectAllOption: true

            })

        }

    });

}

// Multiselect drop down list with id parent_task

<select id="parent_task" multiple="multiple">

</select>

edited Jan 15 '17 at 7:41

clearlight

8,65893858

answered Aug 18 '16 at 13:56

Yaswini Modupalli

add a comment |

Hope this will help you out.

Multiselect dropdown list and related js & css files

// This function should be called while loading page

var loadParentTaskList = function(){

    $.ajax({

        url: yoururl,

        method: 'POST',

        success: function(data){

            // To add options list coming from AJAX call multiselect

            for (var field in data) {

                $('<option value = "'+ data[field].name +'">' + data[field].name + '</option>').appendTo('#parent_task');

            }

   

            // To initiate the multiselect call 

            $("#parent_task").multiselect({

                includeSelectAllOption: true

            })

        }

    });

}

// Multiselect drop down list with id parent_task

<select id="parent_task" multiple="multiple">

</select>

edited Jan 15 '17 at 7:41

clearlight

8,65893858

answered Aug 18 '16 at 13:56

Yaswini Modupalli

Hope this will help you out.

Multiselect dropdown list and related js & css files

// This function should be called while loading page

var loadParentTaskList = function(){

    $.ajax({

        url: yoururl,

        method: 'POST',

        success: function(data){

            // To add options list coming from AJAX call multiselect

            for (var field in data) {

                $('<option value = "'+ data[field].name +'">' + data[field].name + '</option>').appendTo('#parent_task');

            }

   

            // To initiate the multiselect call 

            $("#parent_task").multiselect({

                includeSelectAllOption: true

            })

        }

    });

}

// Multiselect drop down list with id parent_task

<select id="parent_task" multiple="multiple">

</select>

// This function should be called while loading page

var loadParentTaskList = function(){

    $.ajax({

        url: yoururl,

        method: 'POST',

        success: function(data){

            // To add options list coming from AJAX call multiselect

            for (var field in data) {

                $('<option value = "'+ data[field].name +'">' + data[field].name + '</option>').appendTo('#parent_task');

            }

   

            // To initiate the multiselect call 

            $("#parent_task").multiselect({

                includeSelectAllOption: true

            })

        }

    });

}

// Multiselect drop down list with id parent_task

<select id="parent_task" multiple="multiple">

</select>

// This function should be called while loading page

var loadParentTaskList = function(){

    $.ajax({

        url: yoururl,

        method: 'POST',

        success: function(data){

            // To add options list coming from AJAX call multiselect

            for (var field in data) {

                $('<option value = "'+ data[field].name +'">' + data[field].name + '</option>').appendTo('#parent_task');

            }

   

            // To initiate the multiselect call 

            $("#parent_task").multiselect({

                includeSelectAllOption: true

            })

        }

    });

}

// Multiselect drop down list with id parent_task

<select id="parent_task" multiple="multiple">

</select>

edited Jan 15 '17 at 7:41

clearlight

8,65893858

answered Aug 18 '16 at 13:56

Yaswini Modupalli

edited Jan 15 '17 at 7:41

clearlight

8,65893858

edited Jan 15 '17 at 7:41

clearlight

8,65893858

edited Jan 15 '17 at 7:41

clearlight

8,65893858

answered Aug 18 '16 at 13:56

Yaswini Modupalli

answered Aug 18 '16 at 13:56

Yaswini Modupalli

answered Aug 18 '16 at 13:56

Yaswini Modupalli

add a comment |

-1

var expanded = false;



function showCheckboxes() {

  var checkboxes = document.getElementById("checkboxes");

  if (!expanded) {

    checkboxes.style.display = "block";

    expanded = true;

  } else {

    checkboxes.style.display = "none";

    expanded = false;

  }

}

.multiselect {

  width: 200px;

}



.selectBox {

  position: relative;

}



.selectBox select {

  width: 100%;

  font-weight: bold;

}



.overSelect {

  position: absolute;

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

}



#checkboxes {

  display: none;

  border: 1px #dadada solid;

}



#checkboxes label {

  display: block;

}



#checkboxes label:hover {

  background-color: #1e90ff;

}

<form>

  <div class="multiselect">

    <div class="selectBox" onclick="showCheckboxes()">

      <select>

        <option>Select an option</option>

      </select>

      <div class="overSelect"></div>

    </div>

    <div id="checkboxes">

      <label for="one">

        <input type="checkbox" id="one" />First checkbox</label>

      <label for="two">

        <input type="checkbox" id="two" />Second checkbox</label>

      <label for="three">

        <input type="checkbox" id="three" />Third checkbox</label>

    </div>

  </div>

</form>

edited Oct 10 '18 at 20:13

AAEM

726318

answered Oct 10 '18 at 19:28

i hate this

add a comment |

-1

var expanded = false;



function showCheckboxes() {

  var checkboxes = document.getElementById("checkboxes");

  if (!expanded) {

    checkboxes.style.display = "block";

    expanded = true;

  } else {

    checkboxes.style.display = "none";

    expanded = false;

  }

}

.multiselect {

  width: 200px;

}



.selectBox {

  position: relative;

}



.selectBox select {

  width: 100%;

  font-weight: bold;

}



.overSelect {

  position: absolute;

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

}



#checkboxes {

  display: none;

  border: 1px #dadada solid;

}



#checkboxes label {

  display: block;

}



#checkboxes label:hover {

  background-color: #1e90ff;

}

<form>

  <div class="multiselect">

    <div class="selectBox" onclick="showCheckboxes()">

      <select>

        <option>Select an option</option>

      </select>

      <div class="overSelect"></div>

    </div>

    <div id="checkboxes">

      <label for="one">

        <input type="checkbox" id="one" />First checkbox</label>

      <label for="two">

        <input type="checkbox" id="two" />Second checkbox</label>

      <label for="three">

        <input type="checkbox" id="three" />Third checkbox</label>

    </div>

  </div>

</form>

edited Oct 10 '18 at 20:13

AAEM

726318

answered Oct 10 '18 at 19:28

i hate this

add a comment |

-1

var expanded = false;



function showCheckboxes() {

  var checkboxes = document.getElementById("checkboxes");

  if (!expanded) {

    checkboxes.style.display = "block";

    expanded = true;

  } else {

    checkboxes.style.display = "none";

    expanded = false;

  }

}

.multiselect {

  width: 200px;

}



.selectBox {

  position: relative;

}



.selectBox select {

  width: 100%;

  font-weight: bold;

}



.overSelect {

  position: absolute;

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

}



#checkboxes {

  display: none;

  border: 1px #dadada solid;

}



#checkboxes label {

  display: block;

}



#checkboxes label:hover {

  background-color: #1e90ff;

}

<form>

  <div class="multiselect">

    <div class="selectBox" onclick="showCheckboxes()">

      <select>

        <option>Select an option</option>

      </select>

      <div class="overSelect"></div>

    </div>

    <div id="checkboxes">

      <label for="one">

        <input type="checkbox" id="one" />First checkbox</label>

      <label for="two">

        <input type="checkbox" id="two" />Second checkbox</label>

      <label for="three">

        <input type="checkbox" id="three" />Third checkbox</label>

    </div>

  </div>

</form>

edited Oct 10 '18 at 20:13

AAEM

726318

answered Oct 10 '18 at 19:28

i hate this

var expanded = false;



function showCheckboxes() {

  var checkboxes = document.getElementById("checkboxes");

  if (!expanded) {

    checkboxes.style.display = "block";

    expanded = true;

  } else {

    checkboxes.style.display = "none";

    expanded = false;

  }

}

.multiselect {

  width: 200px;

}



.selectBox {

  position: relative;

}



.selectBox select {

  width: 100%;

  font-weight: bold;

}



.overSelect {

  position: absolute;

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

}



#checkboxes {

  display: none;

  border: 1px #dadada solid;

}



#checkboxes label {

  display: block;

}



#checkboxes label:hover {

  background-color: #1e90ff;

}

<form>

  <div class="multiselect">

    <div class="selectBox" onclick="showCheckboxes()">

      <select>

        <option>Select an option</option>

      </select>

      <div class="overSelect"></div>

    </div>

    <div id="checkboxes">

      <label for="one">

        <input type="checkbox" id="one" />First checkbox</label>

      <label for="two">

        <input type="checkbox" id="two" />Second checkbox</label>

      <label for="three">

        <input type="checkbox" id="three" />Third checkbox</label>

    </div>

  </div>

</form>

var expanded = false;



function showCheckboxes() {

  var checkboxes = document.getElementById("checkboxes");

  if (!expanded) {

    checkboxes.style.display = "block";

    expanded = true;

  } else {

    checkboxes.style.display = "none";

    expanded = false;

  }

}

.multiselect {

  width: 200px;

}



.selectBox {

  position: relative;

}



.selectBox select {

  width: 100%;

  font-weight: bold;

}



.overSelect {

  position: absolute;

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

}



#checkboxes {

  display: none;

  border: 1px #dadada solid;

}



#checkboxes label {

  display: block;

}



#checkboxes label:hover {

  background-color: #1e90ff;

}

<form>

  <div class="multiselect">

    <div class="selectBox" onclick="showCheckboxes()">

      <select>

        <option>Select an option</option>

      </select>

      <div class="overSelect"></div>

    </div>

    <div id="checkboxes">

      <label for="one">

        <input type="checkbox" id="one" />First checkbox</label>

      <label for="two">

        <input type="checkbox" id="two" />Second checkbox</label>

      <label for="three">

        <input type="checkbox" id="three" />Third checkbox</label>

    </div>

  </div>

</form>

var expanded = false;



function showCheckboxes() {

  var checkboxes = document.getElementById("checkboxes");

  if (!expanded) {

    checkboxes.style.display = "block";

    expanded = true;

  } else {

    checkboxes.style.display = "none";

    expanded = false;

  }

}

.multiselect {

  width: 200px;

}



.selectBox {

  position: relative;

}



.selectBox select {

  width: 100%;

  font-weight: bold;

}



.overSelect {

  position: absolute;

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

}



#checkboxes {

  display: none;

  border: 1px #dadada solid;

}



#checkboxes label {

  display: block;

}



#checkboxes label:hover {

  background-color: #1e90ff;

}

<form>

  <div class="multiselect">

    <div class="selectBox" onclick="showCheckboxes()">

      <select>

        <option>Select an option</option>

      </select>

      <div class="overSelect"></div>

    </div>

    <div id="checkboxes">

      <label for="one">

        <input type="checkbox" id="one" />First checkbox</label>

      <label for="two">

        <input type="checkbox" id="two" />Second checkbox</label>

      <label for="three">

        <input type="checkbox" id="three" />Third checkbox</label>

    </div>

  </div>

</form>

edited Oct 10 '18 at 20:13

AAEM

726318

answered Oct 10 '18 at 19:28

i hate this

edited Oct 10 '18 at 20:13

AAEM

726318

edited Oct 10 '18 at 20:13

AAEM

726318

edited Oct 10 '18 at 20:13

AAEM

726318

answered Oct 10 '18 at 19:28

i hate this

answered Oct 10 '18 at 19:28

i hate this

answered Oct 10 '18 at 19:28

i hate this

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Btukfyl