How to use Checkbox inside Select Option

Question

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 t

Answer 1

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

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";
}

Unicode

  Dog
  Cat
  Hippo
  Dinosaur
  Another Dog


Font Awesome

  Dog
  Cat
  Hippo
  Dinosaur
  Another Dog

Note: Beware of IE compatibility issues however