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元素」顯然是有幫助的。