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

第二个问题，for中label和name input中library(pls) gasoline的使用情况是什么？

Answer 1

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

for的目的是指出我们定位/绑定的输入。因此，对于复选框，如果单击文本标签，即使没有单击默认复选框，它仍将检查它。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

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

如果您将带有input个元素（可能还有更多）的表单发送给PHP脚本的POST请求，您可以通过名称访问用户在$_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>";
?>

for元素的label属性将标签连接到标签元素的输入字段，以及标签。连接不是由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也会让客户阅读您的代码更多信息，但例如，在文字转语音系统中为视障用户阅读。另一个有趣的话题是所谓的＆＃34;语义网＆＃34;。在那里，您编写的代码不仅可以由机器（如浏览器）显示，而且可以在某种程度上理解并由机器解释。为此，在代码中说明＆＃34;此label元素标记了input元素＆＃34;显然很有帮助。

Answer 3

您必须将内容包装在label标签上。使用for for focusse您的复选框为=“ident”添加标签并输入id =“ident”。

你也可以使用::之前和之后的样式你的复选框。实施例

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

Html / css - 无法将自定义复选框与另一个

3 个答案: