styling dropdown with checkboxes

Question

I want to change the styling of a dropdown with check boxes using only CSS and javascript. I have added a picture of what I am trying to make when the button is pressed.. It would be nice if I could make a focus to the selected check box just like the grey container at the first checkbox

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>Group</option>
      </select>
      <div class="overSelect"></div>
    </div>
    <div id="checkboxes">
      <label for="one">
        <input type="checkbox" id="one" /> Boiler
       </label>
      <label for="two">
        <input type="checkbox" id="two" /> Engine
       </label>
      <label for="three">
        <input type="checkbox" id="three" /> Fan
       </label>
      <label for="one">
        <input type="checkbox" id="four" /> Location
       </label>
      <label for="two">
        <input type="checkbox" id="five" /> Ship
       </label>
      <label for="three">
        <input type="checkbox" id="six" /> Valmarine
       </label>
      <label for="three">
        <input type="checkbox" id="seven" /> Voyage</label>
    </div>
  </div>
</form>

For example I want to change the color of the dropdown button, the color of the box with the arrow on the right of the dropbox, the color of the checkboxes (dark grey) etc.. I am trying to make it as simple as possible using only CSS and javascript.

you want to change the color of the row with checkbox checked? — Chris Li, Sep 12 '18 at 12:55
is that what you want or you want to achieve something else? — Chris Li, Sep 12 '18 at 12:59

Serg Chernata · Accepted Answer · 2018-09-12T15:00:04.437

You can get pretty far on css alone. Most of the trick here is using a pseudo element on checkbox to represent selected state.

No html and js changes in this solution.

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

* {
  box-sizing: border-box;
}

body {
  background: #0b4a79;
}

input[type="checkbox"]:checked::after {
  border: 1px solid #a8a8a8;
  background: #dadada;
  background: linear-gradient(to bottom, #f0f0f0 0%, #c5c5c5 100%);
  content: "";
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  z-index: -10;
  border-radius: 2px;
}

.multiselect {
  width: 200px;
}

.selectBox {
  position: relative;
}

.selectBox select {
  width: 100%;
  font-weight: bold;
  background: #0000;
  border: none;
  border-radius: 2px;
  background: linear-gradient(to bottom, #c9dde8 0%, #86b3cc 100%);
}

.overSelect {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#checkboxes {
  background-color: #103c5d;
  display: none;
  border: 1px #dadada solid;
  margin: 5px 0 0 0;
  border-radius: 3px;
}

#checkboxes label {
  display: block;
  font-family: Helvetica, Arial, sans-serif;
  margin: 4px;
  padding: 3px 2px;
  position: relative;
  color: #ffffff;
  background: rgba(0, 0, 0, 0);
  z-index: 1;
}

#checkboxes label:hover {
  background-color: #1e90ff;
  border-radius: 2px;
}

<form>
  <div class="multiselect">
    <div class="selectBox" onclick="showCheckboxes()">
      <select>
        <option>Group</option>
      </select>
      <div class="overSelect"></div>
    </div>
    <div id="checkboxes">
      <label for="one">
        <input type="checkbox" id="one" /> Boiler
       </label>
      <label for="two">
        <input type="checkbox" id="two" /> Engine
       </label>
      <label for="three">
        <input type="checkbox" id="three" /> Fan
       </label>
      <label for="one">
        <input type="checkbox" id="four" /> Location
       </label>
      <label for="two">
        <input type="checkbox" id="five" /> Ship
       </label>
      <label for="three">
        <input type="checkbox" id="six" /> Valmarine
       </label>
      <label for="three">
        <input type="checkbox" id="seven" /> Voyage</label>
    </div>
  </div>
</form>

score 0 · Answer 2 · answered Sep 12 '18 at 14:42

To highlight the label you can go with something like mentioned in this post from @dfsq and add/remove a special class to your label on the click-event.

 // get all your inputs within "#checkboxes label"
 var checkedInput = document.querySelectorAll('#checkboxes label > input');

 // loop over your inputs, by on change of your input (checked/unchecked)
 // toggle the css class for the closest "label"
 Array.from(checkedInput ).forEach(input => {
    input.addEventListener('change', function(event) {              
           this.closest("label").classList.toggle("with-focus");
    });
 });

You can style then the new class

#checkboxes label.with-focus {
  display: block;
  background-color: #eee;
  border-radius: 2px;
}

I've changed your snippet with 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;
  }
}

 // get all your inputs within "#checkboxes label"
 var checkedInput = document.querySelectorAll('#checkboxes label > input');

 // loop over your inputs, by on change of your input (checked/unchecked)
 // toggle the css class for the closest "label"
 Array.from(checkedInput ).forEach(input => {
    input.addEventListener('change', function(event) {              
           this.closest("label").classList.toggle("with-focus");
    });
 });

.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; 
  padding: 5px;
  background-color: #103c5d;
}

#checkboxes label {
  display: block;
}

#checkboxes label.with-focus {
  display: block;
  background-color: #eee;
  border-radius: 2px;
}

#checkboxes label:hover {
  background-color: #1e90ff;
}

<form>
  <div class="multiselect">
    <div class="selectBox" onclick="showCheckboxes()">
      <select>
        <option>Group</option>
      </select>
      <div class="overSelect"></div>
    </div>
    <div id="checkboxes">
      <label for="one">
        <input type="checkbox" id="one" /> Boiler
       </label>
      <label for="two">
        <input type="checkbox" id="two" /> Engine
       </label>
      <label for="three">
        <input type="checkbox" id="three" /> Fan
       </label>
      <label for="one">
        <input type="checkbox" id="four" /> Location
       </label>
      <label for="two">
        <input type="checkbox" id="five" /> Ship
       </label>
      <label for="three">
        <input type="checkbox" id="six" /> Valmarine
       </label>
      <label for="three">
        <input type="checkbox" id="seven" /> Voyage</label>
    </div>
  </div>
</form>

For all the other CSS stuff you should probably dig around, thats not as hard as its sounds ;)

styling dropdown with checkboxes

2 Answers2