造型默認的HTML複選框

Question

此HTML代碼顯示了兩個旁的複選框對方

<div id="mr_mrs"> 
    <ul class="mr_mrs form-no-clear"> 
     <li id="mr" class="popular-category"> 
      <label for="Mr" id="mr">Mr</label> 
      <span><input name="Mr" id="Mr" type="checkbox" /></span> 
      <div class="clearboth"></div> 
      </li> 
     <li id="mrs" class="popular-category"> 
      <label for="Mrs" id="mrs">Mrs</label> 
       <span><input name="Mrs" id="Mrs" type="checkbox" /></span> 
      <div class="clearboth"></div> 
     </li> 
    </ul> 
</div> 

我想自定義checkboxed方和選擇複選框填補一些顏色給它。 IMAGE BELOW

這怎麼辦？

Answer 1

要將兩個控件相鄰放置，請將它們的顯示設置爲內聯塊：display: inline-block。 （div的默認值爲塊顯示。）

要使用戶通過單擊標籤文本來選中該框，有幾個選項。兩者都在下面的例子中顯示。

1. <label>是文本和複選框的父項。
2. 使用<label for="myId">some text</label><input id="myId">將標籤關聯到輸入*

*注：使用了/ ID方法時，它的標籤，並輸入ID。我注意到在這個例子中，id被應用於兩個元素，一個id應該是唯一的頁面。

.checkbox { 
 
    margin: 4px; 
 
    display: inline-block; 
 
}

<div class="checkbox"> 
 
    <label>Box 1<input type="checkbox"></label> 
 
</div> 
 
<div class="checkbox"> 
 
    <label for="myId">Box 2</label> 
 
    <input id="myId" type="checkbox"> 
 
</div>