выпадающий стиль с флажками

Question

Я хочу изменить оформление раскрывающегося списка с помощью флажков, используя только CSS и JavaScript.Я добавил изображение того, что я пытаюсь сделать, когда кнопка нажата. Было бы хорошо, если бы я мог сделать фокус на выбранном флажке, как серый контейнер на первом флажке

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>

Например, я хочу изменить цвет кнопки выпадающего меню, цвет поля со стрелкой справа от выпадающего списка,цвет флажков (темно-серый) и т. д. Я пытаюсь сделать его максимально простым, используя только CSS и javascript.

Answer 1

Вы можете продвинуться довольно далеко только на css. Большая часть хитрости здесь заключается в использовании псевдоэлемента на флажке для представления выбранного состояния.

Нет html и js изменений в этом решении.

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>

Answer 2

Чтобы выделить метку, вы можете пойти с чем-то вроде упомянутого в этом сообщении от @ dfsq и добавить / удалить специальный класс для вашей метки в событии click.

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

Вы можете создать новый класс

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

Я изменил ваш фрагмент с этим:

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>

Для всех остальных вещей CSS, которые вы, вероятно, должны копать, это не так сложно, как его звуки;)