Come aggiungere un rientro sporgente alle etichette di una casella di controllo personalizzata con icone personalizzate in CSS?

Question

Sto cercando di personalizzare l'aspetto delle mie checkbox usando font-fantastico e di avere il testo corretto delle etichette rientrate correttamente. Ho personalizzato l'aspetto delle caselle di controllo che rendono i soliti approcci per far rientrare il testo non funzionante in quanto sto nascondendo la casella di controllo reale (vedi il CSS in basso).

Attualmente, ottengo il seguente (a sinistra), mentre vorrei che la quella a destra:

ho usato il seguente codice (vedi la JSFiddle):

CSS

Ispirato da questo simple CSS checkboxes, io uso il seguente per formattare le mie caselle di controllo wi th font-impressionante:

input[type=checkbox] { 
    display:none; 
} 

input[type=checkbox] + label:before { 
    font-family: FontAwesome; 
    display: inline-block; 
    content: "\f096"; 
    letter-spacing: 10px; 
    cursor: pointer; 
} 

input[type=checkbox]:checked + label:before { 
    content: "\f046"; 
} 

input[type=checkbox]:checked + label:before { 
    letter-spacing: 8px; 
} 

HTML

<input type="checkbox" id="box1" checked=""> 
<label for="box1">Item 1: some long text...</label> 
<br> 
<input type="checkbox" id="box2" checked=""> 
<label for="box2">Item 2: some long text...</label> 
<br> 
<input type="checkbox" id="box3"> 
<label for="box3">Item 3: some long text...</label> 

ho cercato di modificare le margin-left e text-indent attributi dei label e label:before selettori, ma senza alcun successo.

Qualche idea su come avrei potuto ottenere il rientro corretto durante l'utilizzo delle icone carine e fantastiche?

Grazie mille per il vostro aiuto!

Answer 1

Aggiungi questo stile (testato sia su Chrome e Firefox)

label { 
    display: block; 
    padding-left: 1.5em; 
    text-indent: -.7em; 
} 

http://jsfiddle.net/tkt4zsmc/2/

---

Risultato finale:

Answer 2

Sulla base della risposta di Fabrizio Calderan, Ho usato le seguenti modifiche al CSS:

label{ 
    display: inline-block; 
    margin-left: 20px; 
} 

label:before{ 
    margin-left: -23px; 
} 

Il vantaggio è che non modifica la spaziatura tra gli articoli. Puoi vedere i risultati finali in JSFiddle.

Answer 3

Dopo aver provato il suggerimento di fcalderan e non essere in grado di ottenere i valori per padding-left e text-indent per i diversi browser, sono passato a una casella flessibile. Al giorno d'oggi è bello green.

Se si mettono le coppie input/label in div s come è raccomandato da Mozilla, è possibile lo stile di loro in questo modo.

fieldset { 
 
    width: 13ch; 
 
} 
 

 
fieldset > div { 
 
    display: flex; 
 
} 
 

 
fieldset > div > * { 
 
    align-self: baseline; 
 
} 
 

 
fieldset > div > input[type=checkbox] { 
 
    margin: 0 0.5ch 0 0; 
 
    width: 1em; 
 
    height: 1em; 
 
}

<fieldset> 
 
    <legend>Sichtbarkeit</legend> 
 
    <div> 
 
    <input id="c1" checked="" type="checkbox"> 
 
    <label for="c1">Minuten</label> 
 
    </div> 
 
    <div> 
 
    <input id="c2" checked="" type="checkbox"> 
 
    <label for="c2">Nur Minuten, die Vielfache von 5 sind</label> 
 
    </div> 
 
    <div> 
 
    <input id="c3" checked="" type="checkbox"> 
 
    <label for="c3">Stunden</label> 
 
    </div> 
 
    <div> 
 
    <input id="c4" checked="" type="checkbox"> 
 
    <label for="c4">Nur 12 Stunden</label> 
 
    </div> 
 
</fieldset>