CSS不是复选框列表工作
问题描述:
input[type="checkbox"]:checked + label:after{
border: 2px solid red;
background-color: red;
}
<div class="input-field col s12">
<input id="cb1" name="testCheck" type="checkbox" required>
<label for="cb1">Option 1</label>
</div>
<div class="input-field col s12">
<input id="cb2" name="testCheck" type="checkbox" required>
<label for="cb2">Option 2</label>
</div>
<div class="input-field col s12">
<input id="cb3" name="testCheck" type="checkbox" required>
<label for="cb3">Option 3</label>
</div>
我有一个复选框列表
<div class="input-field col s12">
<input id="cb1" name="testCheck" type="checkbox" required>
<label for="cb1">Option 1</label>
</div>
<div class="input-field col s12">
<input id="cb2" name="testCheck" type="checkbox" required>
<label for="cb2">Option 2</label>
</div>
<div class="input-field col s12">
<input id="cb3" name="testCheck" type="checkbox" required>
<label for="cb3">Option 3</label>
</div>
我用下面的CSS改变的复选框的颜色选中时:
input[type="checkbox"]:checked + label:after{
border: 2px solid red;
background-color: red;
}
不起作用。有趣的是,相同的CSS:
input[type="radio"]:checked + label:after{
border: 2px solid red;
background-color: red;
}
适用于单选按钮列表。
我想这样的事情:
https://d2d3qesrx8xj6s.cloudfront.net/img/screenshots/68b1d126c5b51eb4267aed2e5fd751db1c72aa1b.jpeg
答
我发现,为我工作的解决方案。我向每个复选框添加了一个类 - class="filled-in"
并更改了我的css:
input[type="checkbox"].filled-in:checked + label:after{
border: 2px solid red;
background-color: red;
}
答
如果这是你的代码的整体也不会因为是工作。你需要给:after
psuedo元素一些额外的属性。即content: "";
更新 - 在你提到的评论你只是想添加一个边框到复选框。要做到这一点使用outline
。就像这样:
input[type="checkbox"]:checked {
outline: 3px solid red;
}
<div class="input-field col s12">
<input id="cb1" name="testCheck" type="checkbox" required>
<label for="cb1">Option 1</label>
</div>
<div class="input-field col s12">
<input id="cb2" name="testCheck" type="checkbox" required>
<label for="cb2">Option 2</label>
</div>
<div class="input-field col s12">
<input id="cb3" name="testCheck" type="checkbox" required>
<label for="cb3">Option 3</label>
</div>
答
我没有看到你发布的:after
代码任何目的 - 没有什么后,您的标签突出,所以我不知道为什么你试图设计它。
如果您将其从规则中删除,CSS会将标签以红色突出显示。我认为这就是你想要做的?
input[type="checkbox"]:checked + label{
border: 2px solid red;
background-color: red;
}
工作例如:
input[type="checkbox"]:checked + label{
border: 2px solid red;
background-color: red;
}
<div class="input-field col s12">
<input id="cb1" name="testCheck" type="checkbox" required>
<label for="cb1">Option 1</label>
</div>
<div class="input-field col s12">
<input id="cb2" name="testCheck" type="checkbox" required>
<label for="cb2">Option 2</label>
</div>
<div class="input-field col s12">
<input id="cb3" name="testCheck" type="checkbox" required>
<label for="cb3">Option 3</label>
</div>
+0
事情是我只想突出显示复选框本身,而不是标签 – ElenaDBA
您确定CSS可用于无线电输入吗?因为你实际上不能将兄弟选择器和伪元素一起使用。 – FluffyKitten
可能的重复[我可以使用兄弟组合器在一个伪元素之前或之后:](https://*.com/questions/7735267/can-i-target-a-before-or-after-伪元素与同级组合器) – FluffyKitten
你希望用':after'和'label'完成什么? – j08691