Question

react.js

session

style.css

user

<块引用>

点击后我的复选框没有任何反映。可以做什么？我什至尝试过内联样式。那也行不通。

我对此进行了研究，有很多关于此的类似问题，但没有对我有用。我是一个新的编码员，如果这很愚蠢，请见谅

Answer 1

使用input[type="checkbox"]:checked。这将选择选中的复选框。

使用方法如下：

如果片段不可用，use this JSFiddle link.

input[type=checkbox] {
  height:0px;
  width:0px;
}
input[type=checkbox]::after {
  height:12px;
  width:12px;
  content:"\00a0\00a0\00a0\00a0";
  border:1px solid black;
}
/* The magic below */
input[type=checkbox]:checked::after {
  height:12px;
  width:12px;
  background-color:cyan;
  content:"✓";
  border:1px solid black;
}

<input type="checkbox" id="first" />
<label for="first" id="first">Here! A Checkbox!</label>

它也适用于单选按钮：

input[type="radio"] {
  width:0px;
  height:0px;
} 
input[type="radio"]::after {
  content:"\00a0\00a0\00a0\00a0";
  border-radius:5px;
  height:10px;
  width:10px;
  position:absolute;
  border:1px solid black;
  display:inline;
}
input[type="radio"]:checked::after {
  content:"✓";
  background-color:#00ffff;
}

<div>
<input type="radio" name="radio" id="one" />
<label for="one">Option 1</label>
</div>
<hr>
<div>
<input type="radio" name="radio" id="two" />
<label for="two">Option 2</label>
</div>
<hr>
<div>
<input type="radio" name="radio" id="three" />
<label for="three">Option 3</label>
</div>

选中后如何设置复选框的样式？

1 个答案: