Html/css - 无法将自定义复选框一个一个地对齐

Question

我正在构建自定义复选框而不是默认复选框。我需要将它们一个接一个地对齐，问题是如果我设置：

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

为了隐藏默认复选框，其余复选框未在一列中对齐。如果我设置 display:block;，它们会按照我的需要对齐，但我看到自定义复选框和默认值。我该如何解决此问题？

HTML:

<div id="checkBoxesContainer">
        <input type='checkbox' value='valuable1' /><label for="thing"></label> Content 5
        <input type='checkbox' value='valuable2' /><label for="thing"></label> Content 4
        <input type='checkbox' value='valuable3' /><label for="thing"></label> Content 3
        <input type='checkbox' value='valuable4' /><label for="thing"></label> Content 2
        <input type='checkbox' value='valuable5' /><label for="thing"></label> Content 1
    </div>

CSS:

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

input[type=checkbox] + label
{
    background-color: grey;
    height: 15px;
    width: 15px;
    display:inline-block;
    padding: 0 0 0 0px;
}
input[type=checkbox]:checked + label
{
    background-color: blue;
    height: 15px;
    width: 15px;
    display:inline-block;
    padding: 0 0 0 0px;
}

JSfiddle

第二个问题，label中的for和input中的name有什么用？

Answer 1

好的，首先，最好将文本放在标签内。其次，如果您设置默认复选框 display:none，那么它将不可点击。您可以将其设置为 visibility: hidden。

for 的目的是指向我们targeting/bound 要指向的输入。因此，对于复选框，如果您单击文本标签，即使没有单击默认复选框，它仍会选中它。

input[type=checkbox] {
    display:block;
    visibility: hidden;
}

label span
{
    background-color: grey;
    height: 15px;
    width: 15px;
    display:inline-block;
    padding: 0 0 0 0px;
    margin-right: 5px
}
input[type=checkbox]:checked + label span
{
    background-color: blue;
    height: 15px;
    width: 15px;
    display:inline-block;
    padding: 0 0 0 0px;
}

<div id="checkBoxesContainer">
    <input type='checkbox' value='valuable1' id="valuable1"/><label for="valuable1"><span></span> Content 5</label> 
        <input type='checkbox' value='valuable2' id="valuable2"/><label for="valuable2"><span></span> Content 4</label> 
        <input type='checkbox' value='valuable3' id="valuable3"/><label for="valuable3"><span></span> Content 3</label> 
        <input type='checkbox' value='valuable4' id="valuable4"/><label for="valuable4"><span></span> Content 2</label> 
        <input type='checkbox' value='valuable5' id="valuable5"/><label for="valuable5"><span></span> Content 1</label> 
    </div>

Answer 2

您必须将内容包装在 label 标签上。使用 for 聚焦您的复选框添加标签 for="ident" 并输入 id="ident".

您还可以使用 ::after 和 before 来设置复选框的样式。例子

input[type=checkbox]:after {
    content: "";
    background-color: grey;
    height: 15px;
    width: 15px;
    display:inline-block;
    padding: 0 0 0 0px;
    position: absolute;
}
input[type=checkbox]:checked:after {
    content: "";
    background-color: red;
    height: 15px;
    width: 15px;
    display:inline-block;
    padding: 0 0 0 0px;
    position: absolute;
}

并为您的基本 chcecbox 取得相对位置。 Fiddle

Answer 3

回答您的第二个问题：name 属性设置应该在 input 元素中输入的值的名称。当用户输入被评估时，通常是通过某种服务器端技术，如 PHP，值由这些名称标识。例如，假设您有一个名字字段和一个姓氏字段

<input type="text" name="first_name" />
<input type="text" name="last_name" />

如果您将包含这些 input 元素（可能还有更多）的表单与 POST 请求一起发送到 PHP 脚本，您可以访问用户输入的值$_POST 数组的名称作为索引

<?php
// any kind of user input filtering, error handling and such
// ommitted for brevity and clarity
echo "<p>Your first name is " . $_POST['first_name'] . "</p>";
echo "<p>Your last name is " . $_POST['last_name'] . "</p>";
?>

label 元素的 for 属性将标签连接到输入字段，标签元素就是其标签。连接不是由 input 元素的名称完成的，正如人们所假设的那样，而是通过它的 id.

<label for="male">Male</label>
<input type="radio" name="gender" id="male" value="male" />
<label for="female">Female</label>
<input type="radio" name="gender" id="female" value="female" />
<label for="female">Other</label>
<input type="radio" name="gender" id="other" value="other" />

label 和 for 不会直接影响网络浏览器如何显示您的页面。但是有几个有趣的效果。例如，如果您告诉浏览器 input 属于哪个 label，而用户单击 label，浏览器应将光标设置为 input。 label 如果您的页面未在网络浏览器中显示，但例如在视障用户的文本到语音系统中阅读，则 labels 还会为阅读您的代码的客户提供更多信息。另一个有趣的话题是所谓的"semantic web"。在那里，您编写的代码不仅可以显示由机器（如浏览器），而且可以在一定程度上由机器理解和解释.为此，在您的代码中说明 "this label element is labeling that input element" 显然很有帮助。

Html/css - 无法将自定义复选框一个一个地对齐

Html/css - Unable to align custom checkboxes one under the other

html

css

checkbox