使用自定義複選框檢查項目時顯示

我正在使用Wordpress構建一個帶有自定義複選框的網站（顯然它比這更多，但這正是我所關心的問題）。我可以顯示自定義複選框，但無法顯示何時打勾。任何人都可以協助CSS來實現這個目標嗎？使用自定義複選框檢查項目時顯示

這裏的佈局和CSS我有複選框由WordPress和聯繫表7插件作爲生成：

input[type=checkbox] { 
 
    display: none; 
 
} 
 
.wpcf7-list-item label:before { 
 
    content: ""; 
 
    display: inline-block; 
 
    width: 16px; 
 
    height: 16px; 
 
    left: 0; 
 
    position: relative; 
 
    top: 3px; 
 
    background-color: #fff; 
 
    border: 2px #3f9abb solid; 
 
    border-radius: 2px; 
 
}

<span class="wpcf7-list-item first"> 
 
     <label> 
 
      <input type="checkbox" name="community[]" value="Community Member"> 
 
      &nbsp; 
 
      <span class="wpcf7-list-item-label">Community Member</span> 
 
</label> 
 
</span>

我試過這個指南，但沒有運氣。是否有人能夠協助獲得勾號顯示（並且在表單提交時顯然仍然提交）？

來源

2014-09-25 Albert

試試這個http://jsfiddle.net/awayF/4/ – 2014-09-25 12:51:43

這個已經被問過http://stackoverflow.com/questions/21968531/how-to-draw-a-checkmark-tick- using-css – 2014-09-25 12:52:48

input[type=checkbox] { 
 
    display: none; 
 
} 
 
.wpcf7-list-item label:before { 
 
    content: ""; 
 
    display: inline-block; 
 
    width: 16px; 
 
    height: 16px; 
 
    left: 0; 
 
    position: relative; 
 
    top: 3px; 
 
    background-color: #fff; 
 
    border: 2px #3f9abb solid; 
 
    border-radius: 2px; 
 
} 
 

 
input[type=checkbox]:checked + label:before { 
 
background: blue; 
 
}

<span class="wpcf7-list-item first"> 
 
    <input id="checkbox" type="checkbox" name="community[]" value="Community Member"> 
 
     <label for="checkbox"> 
 
      <span class="wpcf7-list-item-label">Community Member</span> 
 
     </label> 
 
</span>

更新 - 使用您當前的標記

input[type=checkbox] { 
 
    display: none; 
 
} 
 
.wpcf7-list-item label > span:before { 
 
    content: ""; 
 
    display: inline-block; 
 
    width: 16px; 
 
    height: 16px; 
 
    left: 0; 
 
    position: relative; 
 
    top: 3px; 
 
    background-color: #fff; 
 
    border: 2px #3f9abb solid; 
 
    border-radius: 2px; 
 
} 
 

 
input[type=checkbox]:checked + span:before { 
 
    background: blue; 
 
}

<span class="wpcf7-list-item first"> 
 
     <label> 
 
      <input type="checkbox" name="community[]" value="Community Member"> 
 
      <span class="wpcf7-list-item-label">Community Member</span> 
 
     </label> 
 
</span>

來源

2014-09-25 12:49:21 Turnip

由於它是生成的代碼，我無法改變它的順序。除非你可以提供一個可以做到這一點的jQuery方法。 – Albert 2014-09-25 12:52:19

確定查看更新 – Turnip 2014-09-25 12:56:00

完美！非常感謝。現在嘗試和測試它，如果它能100％工作，將會接受:) – Albert 2014-09-25 12:58:10

那麼，如果稍微更改代碼，則可以使用input:checked + label在選中時更新樣式。

input[type=checkbox] { 
 
    display: none; 
 
} 
 
.wpcf7-list-item label:before { 
 
    content: ""; 
 
    display: inline-block; 
 
    width: 16px; 
 
    height: 16px; 
 
    left: 0; 
 
    position: relative; 
 
    top: 3px; 
 
    background-color: #fff; 
 
    border: 2px #3f9abb solid; 
 
    border-radius: 2px; 
 
} 
 

 

 
.wpcf7-list-item input:checked + label:before { background-color: red; }

<span class="wpcf7-list-item first"> 
 
     <input type="checkbox" name="community[]" value="Community Member" id="foo"> 
 
     <label for="foo"><span class="wpcf7-list-item-label">Community Member</span></label> 
 
</span>

來源

2014-09-25 12:47:31 epascarello

由於它生成的代碼，我無法改變它的順序。除非你可以提供一個可以做到這一點的jQuery方法。 – Albert 2014-09-25 12:53:51

使用自定義複選框檢查項目時顯示

回答

相關問題