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

第二个问题，什么是for在input的label和name使用？

Answer 1

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

for的目的是指出我们的目标/绑定的输入。所以对于复选框，如果你点击文本标签，即使没有点击默认复选框，它仍然会检查它。

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

必须wrapp在标签标记的内容。 用于勾画您的复选框添加=“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; 
} 

并取相对于您的基本计数器的位置。 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 a label所属，并且用户点击label，浏览器应该将光标设置为input。 label如果您的网页未在网页浏览器中显示，还可以让客户读取您的代码更多信息，但是例如在视频受损用户的文字转语音系统中阅读。另一个有趣的话题就是所谓的“语义网络”。在那里你写代码不仅可以通过机器（如浏览器）显示，但可以在一定程度上理解为并由机器解释。为此，在你的代码中说明“这个label元素是标记input元素”显然是有帮助的。