任何人都可以帮助我使用此代码，以便在选中复选框时，文本也会有删除线吗？
我可以使用删除线或者css样式，但我不能同时使用它们：（
我尝试将下面的代码与链接中的代码结合起来，但我无法弄清楚我做错了什么。 CSS checkbox strikethrough Demo
<label class="container">Two
<input type="checkbox">
<span class="checkmark"></span>
</label>$json =<<<JSON
{
"foo":"foo1",
"bar":"bar1",
"fields":[
{
"foo":"foo2",
"bar":"bar2",
"fields":[
{
"foo":"foo3",
"bar":"bar3",
"count":3
},
{
"foo":"foo4",
"bar":"bar4",
"count":2
}
],
"count":4
}
],
"count":1
}
JSON;
$json = json_decode($json, true);
function flatten($array, &$flattened) {
foreach($array as $k => $v) {
if(isset($v['fields'])) {
flatten($v['fields'], $flattened);
unset($v['fields']);
}
$flattened[] = $v;
}
}
flatten([$json], $flattened);
usort($flattened, function($a, $b) {
if($a == $b) return 0;
return $b['count'] > $a['count'] ? 1 : -1;
});
foreach($flattened as $item) {
print $item['foo'] . "\n";
}
答案 0 :(得分：1)
您可以使用伪元素::before和::after与text-decoration: line-through
/* Customize the label (the container) */
.container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
}
/* Hide the browser's default checkbox */
.container input {
display: none
}
/* Create a custom checkbox - using ::before */
.checkmark::before {
content: "";
height: 25px;
width: 25px;
background-color: #eee;
position: absolute;
left:0;
top:0;
}
/* On mouse-over, add a grey background color */
.container:hover input~.checkmark::before {
background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.container input:checked~.checkmark::before {
background-color: #2196F3;
}
/* Show the checkmark when checked */
.container input:checked~.checkmark:after {
display: block;
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
content: "";
position: absolute;
}
/* strike throught the text */
.container input:checked~.checkmark {
text-decoration: line-through
}<label class="container">
<input type="checkbox">
<span class="checkmark">Two</span>
</label>
答案 1 :(得分：-1)
由于您同时拥有复选框和文本 标签（与您在复选框后标签来自的地方所引用的示例相反），您必须重新排列你的标记稍微。
要修改的文本必须在兄弟选择器的复选框之后才能工作（+或~），并且（因为CSS无法选择父元素）文本必须在里面它自己的元素。
我建议你把它放在自己的span名为.text：
<label class="container">
<input type="checkbox">
<span class="checkmark"></span>
<span class="text">Two</span>
</label>
然后，您可以使用以下选项在选中复选框的兄弟时选择文本：
.container input:checked ~ .text {
text-decoration: line-through;
}
将它放入您的代码中我们得到以下内容：
/* This is our new part*/
.container input:checked ~ .text {
text-decoration: line-through;
}
/* Customize the label (the container) */
.container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.container input {
position: absolute;
opacity: 0;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #2196F3;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.container input:checked ~ .checkmark:after {
display: block;
}<label class="container">
<input type="checkbox">
<span class="checkmark"></span>
<span class="text">Two</span>
</label>
答案 2 :(得分：-3)
首先创建一个标签，让你想要跨越文本，在复选框后添加它并将其添加到css：
input[type=checkbox]:checked + label{
text-decoration: line-through;
}
/* Customize the label (the container) */
.container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.container input {
position: absolute;
opacity: 0;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #2196F3;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
input[type=checkbox]:checked + label{
text-decoration: line-through;
}<label class="container">
<input type="checkbox"><label> Cross me </label>
<span class="checkmark"></span>
</label>