样式下拉列表与复选框

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了样式下拉列表与复选框相关的知识，希望对你有一定的参考价值。

enter image description here

我想使用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。

答案

你可以单独使用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>
另一答案

要突出显示标签，您可以使用此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>

以上是关于样式下拉列表与复选框的主要内容，如果未能解决你的问题，请参考以下文章

作业：------数据库下拉菜单，数据库复选框

android实现下拉列表与复选框结合的功能，全选功能

如何在select下拉列表中添加复选框?

Bootstrap学习笔记

访问：复选框的下拉列表

html下拉框怎么设置默认值