Scrivi una casella di controllo in firefox - rimuovi spunta e spunta

Question

Come si disegna una casella di controllo in firefox e il segno di spunta e il bordo scompaiono?

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

Questo tutsplus tutorial risolto la mia domanda.

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

C'è un modo molto semplice è possibile farlo tramite <label> tags. È sufficiente posizionare un'etichetta attorno alla casella di controllo e inserire un elemento fittizio che verrà utilizzato per la casella di controllo personalizzata. Per esempio:

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>

---

EDIT: Si noti che alcune scelte di colori potrebbero rendere lo stato della vostra casella di controllo invisibili per le persone Colourblind. Quando ho creato questo codice non ci ho pensato, ma la dimostrazione precedente potrebbe essere invisibile per le persone colourblind R/G. Nell'attuare il presente, si prega di tenere a mente (pick vivaci colori/scuri per esempio, o evidenziare una certa differenza di forma)

---

Gli stili che ho usato sono solo arbitraria, e si può cambiare la situazione per tutto quello che vuoi . È anche possibile alternare determinati testi al suo interno tramite lo pseudo-elemento ::before, ad esempio quello che ho fatto here.

Non è stato possibile aprire l'URL dell'immagine che hai fornito per l'uso nella tua domanda, ma penso che sarai in grado di includere qualunque immagine tu desideri semplicemente modificando un po 'questo codice. Basta cambiare il colore attuale background con l'URL dell'immagine che si desidera utilizzare.

Nota: questo non funziona in some older browsers.

Answer 3

La risposta sopra riportata è ottima ma this slight tweak per il violino di Joeytje50 consente di selezionare le caselle di controllo.

Utilizzare l'opacità 0 invece di visualizzare nessuno significa che la casella di controllo è ancora tabbable e quindi accessibile tramite tastiera.

La posizione assoluta posiziona la casella di controllo di input in alto a sinistra rispetto alla casella disegnata, il che significa che la formattazione rimane pulita.

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

Una soluzione detergente IMHO che utilizza css pura per ridisegnare gli elementi.

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; 
 
     }