Question

我正在尝试为复选框创建自定义样式。它正常工作，直到我将input放在label。

之内

有谁知道如何让CSS工作？

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 1

CSS引用input + label。 +是相邻的兄弟选择器https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors，这意味着它定位于label之后的input。

＆＃13;

input[type=checkbox] {
  display: none;
}
/* to hide the checkbox itself */
input[type=checkbox] + label:before {
  color: green;
  display: inline-block;
}
input[type=checkbox] + label:before {
  content: "";
}
/* unchecked icon */
input[type=checkbox] + label:before {
  letter-spacing: 10px;
}
/* space between checkbox and label */
input[type=checkbox]:checked + label:before {
  content: "✔";
}
/* checked icon */
input[type=checkbox]:checked + label:before {
  letter-spacing: 5px;
}
/* allow space for check mark */

＆＃13;

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

＆＃13;

Answer 2

由于您的标签内有<p>，因此input旁边可以使用pseudo来代替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>

aws s3 rb s3://<bucket_name> --force

自定义样式的复选框与标签内的输入

2 个答案: