風格在Firefox中的複選框 - 刪除檢查和邊框

Question

如何在Firefox中設置複選框，並勾選標記和邊框消失？

http://jsfiddle.net/moneylotion/qZvtY/

CSS：

body { background: black; } 
#conditions-form { color: white; } 
#conditions-form input[type=checkbox] { 
    display:inline-block; 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    -o-appearance:none; 
    appearance: none; 
    width:19px; 
    height:19px; 
    background: url('http://demo.somedomain.com/wp-content/themes/themename/images/care-plan-checkbox.gif') no-repeat top left; 
    cursor:pointer; 
} 
#conditions-form input[type=checkbox]:checked { 
    background:url('http://demo.somedomain.com/wp-content/themes/themename/images/care-plan-checkbox-checked.gif') no-repeat top left; 
} 

HTML：

<form id="conditions-form"> 
    <ul> 
     <li> 
      <input id="condition3" type="checkbox" name="conditions[condition3]"></input> 
      <label class="checkbox" for="condition3">Conditions 3</label> 
     </li> 
    </ul> 
</form> 

Answer 1

這tutsplus tutorial解決了我的問題。

input[type="checkbox"] { 
 
    display:none; 
 
} 
 
    
 
input[type="checkbox"] + label span { 
 
    display:inline-block; 
 
    width:19px; 
 
    height:19px; 
 
    margin:-1px 4px 0 0; 
 
    vertical-align:middle; 
 
    background:url(https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/391_checkboxes/check_radio_sheet.png) left top no-repeat; 
 
    cursor:pointer; 
 
} 
 
input[type="checkbox"]:checked + label span { 
 
    background:url(https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/391_checkboxes/check_radio_sheet.png) -19px top no-repeat; 
 
}

<input type="checkbox" id="c1" name="cc" /> 
 
<label for="c1"><span></span>Check Box 1</label>

Answer 2

有一個很簡單的方法，你可以通過<label>標籤做到這一點。只需在複選框周圍放置一個標籤，然後插入一個將用於自定義樣式複選框的虛擬元素。例如：

label.checkbox input[type="checkbox"] {display:none;} 
 
label.checkbox span { 
 
    display:inline-block; 
 
    border:2px solid #BBB; 
 
    border-radius:10px; 
 
    width:25px; 
 
    height:25px; 
 
    background:#C33; 
 
    vertical-align:middle; 
 
    margin:3px; 
 
    position: relative; 
 
    transition:width 0.1s, height 0.1s, margin 0.1s; 
 
} 
 
label.checkbox :checked + span { 
 
    background:#6F6; 
 
    width:27px; 
 
    height:27px; 
 
    margin: 2px; 
 
} 
 
label.checkbox :checked + span:after { 
 
    content: '\2714'; 
 
    font-size: 20px; 
 
    position: absolute; 
 
    top: -2px; 
 
    left: 5px; 
 
    color: #99a1a7; 
 
}

<label class="checkbox"> 
 
    <input type="checkbox"/> 
 
    <span></span> 
 
    I like cake 
 
</label>

---

編輯：需要注意的是顏色的一些選擇可能會使您的複選框的色盲的人看不見的狀態。製作這段代碼時，我沒有想到，但上面的演示對於R/G色彩鮮豔的人們來說可能是不可見的。在實現這一點，請記住這一點（挑亮/暗的顏色，例如，或表現出形狀有些差異）

---

我使用的樣式僅僅是任意的，你可以改變你想要的任何東西。您甚至可以通過::before僞元素來切換其中的某些文本，例如我已經完成的here。

我無法打開您在問題中提供的圖片網址，但我認爲只需簡單修改此代碼即可包含任何想要的圖片。只需將當前的background顏色更改爲您要使用的圖片網址即可。

注意：這不適用於some older browsers。

Answer 3

上述接受的答案很好，但是從Joeytje50提取this slight tweak允許複選框被選中。

使用不透明度0而不是顯示無意味着該複選框仍然是可放置的，因此可以通過鍵盤訪問。

絕對位置將輸入複選框放在繪製框的左上角，這意味着格式保持整齊。

input[type="checkbox"] { 
 
    opacity: 0; 
 
    position: absolute; 
 
} 
 
input[type="checkbox"] + label { 
 
    text-align:center; 
 
    cursor:pointer; 
 
} 
 
input[type="checkbox"]:focus + label { 
 
    background-color: #ddd; 
 
} 
 
input[type="checkbox"] + label div { 
 
    display:inline-block; 
 
    line-height: 16px; 
 
    font-size: 12px; 
 
    height: 16px; 
 
    width: 16px; 
 
    margin:-0px 4px 0 0; 
 
    border: 1px solid black; 
 
    color: transparent; 
 
} 
 
input[type="checkbox"]:checked + label div { 
 
    color: black; 
 
}

<input type="checkbox" id="c1" name="cc" /> 
 
<label for="c1"> 
 
    <div>&#x2714;</div>Check Box 1<br /> 
 
</label> 
 
<input type="checkbox" id="c12" name="cc" /> 
 
<label for="c12"> 
 
    <div>&#x2714;</div>Check Box 2<br /> 
 
</label>

Answer 4

一個清潔溶液IMHO使用純CSS重繪的元素。

Codepen

   input[type="checkbox"] { 
 
      opacity: 0; 
 
      position: absolute; 
 
     } 
 

 
     input[type="checkbox"] ~ label:before { 
 
      content: ''; 
 
      display: inline-block; 
 
      cursor: pointer; 
 
      ... 
 
      border: 3px solid #999; 
 
      border-radius: 2px; 
 
      transition: .3s; 
 
     } 
 

 
     input[type="checkbox"]:checked ~ label:before { 
 
      background: #333; 
 
     }