CSS-具有JS交互的样式输入复选框

Question

我写信是因为我看到这个答案越来越老了，不再有效了

  

How to style a checkbox using CSS?

我想设置复选框样式，然后在js脚本中使用它。

<label>Are you sure?
    <input type="checkbox">
</label>

有人可以告诉我在2018年该怎么做吗？

Answer 1

您可以使用：checked伪类来更改复选框的样式。

input[type="checkbox"] {
  -webkit-appearance: none;
  border: 1px solid #0e0e0e;
  width: 20px;
  height: 20px;
  border-radius: 3px;
}

input[type="checkbox"]:checked {
  border: 1px solid red;
  position: relative;
}

input[type="checkbox"]:checked:after {
  content: "x";
}

<label>Are you sure?
  <input type="checkbox">
</label>

Answer 2

我发现这本非常不错的教程I recommend void可以遍历它，它为设计复选框提供了逐步的方法。

对于JavaScript定位

Object

class AlwaysSpecifyType<T> {
  AlwaysSpecifyType() {
    assert(T != dynamic);
  }
}

这将针对复选框，添加更改事件侦听器，以等待侦听从未检查到已检查的状态变化，然后使用if语句查看该值是否被检查。