带有复选框的样式下拉列表

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

要突出显示标签，您可以使用此post from @dfsq中提到的内容，并在点击事件上向标签添加/删除特殊类。

 // 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东西，您可能应该深入研究，那并不像听起来那么难；）

Answer 2

仅凭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>