在标签内输入的复选框的自定义样式 [英] custom styling for checkbox with input within label

问题描述

我正在尝试为复选框创建自定义样式。直到我将输入放在标签内之前，它才能正常工作。

I am trying to create a custom style for a checkbox. It works normally until I place the input within the label.

有人知道如何使CSS工作吗？

Does anyone know how to get the CSS working?

input[type=checkbox] { /* to hide the checkbox itself */
    display:none;
}
input[type=checkbox] + label:before {
    color:green;
    display: inline-block;
}

input[type=checkbox] + label:before { /* unchecked icon */
    content: "";
}
input[type=checkbox] + label:before { /* space between checkbox and label */
    letter-spacing: 10px;
}
    
input[type=checkbox]:checked + label:before { /* checked icon */
    content: "✔";
}
input[type=checkbox]:checked + label:before { /* allow space for check mark */
    letter-spacing: 5px;
}

<label for="c2">
    <input type="checkbox" id="c2" name="cc" />
    <p>hello</p>
</label>

推荐答案

由于标签内有< p> ，因此紧靠输入您可以使用它来应用 pseudo 元素：

Since you have an <p> inside your label, right next to the input you can use that to apply the pseudo-element instead:

input[type=checkbox] {
  display: none;
}

input[type=checkbox] + p:before {
  display: block;
    content: "";
    width: 18px;
    height: 18px;
    color: green;
    letter-spacing: 10px;
    margin-bottom: 18px;
    vertical-align: top;
}

input[type=checkbox]:checked + p:before {
  content: "✔";
}

input[type=checkbox]:checked + p:before {
  letter-spacing: 5px;
}

<label for="c3">
  <input type="checkbox" id="c3" name="cc" />
  <p>hello</p>
</label>

这篇关于在标签内输入的复选框的自定义样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！