CSS Checkbox Styling

Je travaille sur le style d'une case à cocher CSS. Les choses semblent plutôt bonnes mais j'ai un problème. Si l'étiquette de la boîte contient beaucoup de texte, les boîtes finissent par être alignées de manière incohérente.CSS Checkbox Styling

Comment changer mon code ci-dessous pour que la case à cocher soit sur le côté gauche du texte afin que les choses soient cohérentes?

Voici un jsFiddle: https://jsfiddle.net/7295tvp0/

span.bigcheck-target { 
 
    font-family: FontAwesome; 
 
    font-size: 1.2em; 
 
    margin-top: 20px!important; 
 
} 
 

 
input[type='checkbox'].bigcheck { 
 
    position: relative; 
 
    left: -999em; 
 
    font-size: 2em; 
 
} 
 

 
input[type='checkbox'].bigcheck + span.bigcheck-target:after { 
 
    content: "\f096"; 
 
} 
 

 
input[type='checkbox'].bigcheck:checked + span.bigcheck-target:after { 
 
    content: "\f046"; 
 
} 
 

 
span.bigcheck { 
 
    display: block; 
 
    font-size: 20px; 
 
} 
 

 
.bigcheck-target { 
 
    position: relative 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> 
 

 
<span class="bigcheck"> 
 
    <label class="bigcheck">Short 
 
    <input name="amenities" value="wifi" type="checkbox" class="bigcheck" name="cheese" value="yes"/> 
 
    <span class="bigcheck-target"></span> 
 
    </label> 
 
</span> 
 

 
<span class="bigcheck"> 
 
    <label class="bigcheck">Much longer name 
 
    <input name="amenities" value="personal_video" type="checkbox" class="bigcheck" name="cheese" value="yes"/> 
 
    <span class="bigcheck-target"></span> 
 
    </label> 
 
</span>

Source

2017-07-18 AndrewLeonardi

je suis venu avec cette solution:

span.bigcheck-target { 
 
    font-family: FontAwesome; 
 
    font-size: 1.2em; 
 
    margin-top: 20px!important; 
 
} 
 

 
input[type='checkbox'].bigcheck { 
 
    position: relative; 
 
    left: -999em; 
 
    font-size: 2em; 
 
} 
 

 
input[type='checkbox'].bigcheck + span.bigcheck-target:after { 
 
    content: "\f096"; 
 
} 
 

 
input[type='checkbox'].bigcheck:checked + span.bigcheck-target:after { 
 
    content: "\f046"; 
 
} 
 

 
span.bigcheck { 
 
    display: block; 
 
    font-size: 20px; 
 
} 
 

 
.bigcheck-target { 
 
    position: relative 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> 
 

 
<span class="bigcheck"> 
 
<label class="bigcheck"> 
 
    <input name="amenities" value="wifi" type="checkbox" class="bigcheck" name="cheese" value="yes"/> 
 
    <span class="bigcheck-target"></span> 
 
    <span> Short</span> 
 
</label> 
 
</span> 
 

 
<span class="bigcheck"> 
 
    <label class="bigcheck"> 
 
    <input name="amenities" value="personal_video" type="checkbox" class="bigcheck" name="cheese" value="yes"/> 
 
    <span class="bigcheck-target"></span> 
 
    <span>Much longer name</span> 
 
    </label> 
 
</span>

Source

2017-07-18 00:53:53

Essayez span.bigcheck-target{float:left;}

Et enlever: span.bigcheck-target:margin-top: 20px!important;

Source

2017-07-18 00:56:43 NoCrc

D'abord, votre HTML a besoin d'un peu de remaniement. Utilisez les éléments div pour créer les lignes. Donnez à vos éléments input valeurs id puis utilisez les éléments label afin qu'ils ne doivent pas envelopper ces éléments input en utilisant l'attribut for.

Ensuite, il suffit de définir une largeur unifiée pour les étiquettes:

span.bigcheck-target { 
 
    font-family: FontAwesome; 
 
    font-size: 1.2em; 
 
    margin-top: 20px!important; 
 
} 
 
input[type='checkbox'].bigcheck {  
 
    font-size: 2em; 
 
} 
 

 
input[type='checkbox'].bigcheck + span.bigcheck-target:after { 
 
    content: "\f096"; 
 
    
 
} 
 
input[type='checkbox'].bigcheck:checked + span.bigcheck-target:after { 
 
    content: "\f046"; 
 
    
 
} 
 

 
label { 
 
    font-size: 20px; 
 
    display:inline-block; 
 
    width:200px; 
 
}

<div> 
 
    <label for="amenities1">Short</label> 
 
    <input id="amenities1" name="amenities" value="wifi" type="checkbox" name="cheese" value="yes"> 
 
    <span class="bigcheck-target"></span> 
 
</div> 
 

 
<div> 
 
    <label for="amenities2">Much longer name</label> 
 
    <input id="amenities2" name="amenities" value="personal_video" type="checkbox" name="cheese" value="yes"> 
 
    <span class="bigcheck-target"></span> 
 
</div>

Source

2017-07-18 01:04:11

Mettez votre contenu après votre "entrée" et "span"

Et pour arrêter vos utilisateurs de en soulignant l'utilisation de votre contenu:

.bigcheck { user-select: none; }

Source

2017-07-18 01:11:13 Charles

Réécrire le code en utilisant flexbox.

Vous pouvez y parvenir sans changer le balisage:

span.bigcheck-target { 
 
    font-family: FontAwesome; 
 
    font-size: 1.2em; 
 
    /* space between icon and label */ 
 
    margin-right: 5px; 
 
} 
 

 
input[type='checkbox'].bigcheck { 
 
    /* don't show standard checkbox */ 
 
    display: none; 
 
    font-size: 2em; 
 
} 
 

 
input[type='checkbox'].bigcheck + span.bigcheck-target:after { 
 
    content: "\f096"; 
 
} 
 

 
input[type='checkbox'].bigcheck:checked + span.bigcheck-target:after { 
 
    content: "\f046"; 
 
} 
 

 
span.bigcheck { 
 
    font-size: 20px; 
 
    /* checkbox on every line */ 
 
    display: block; 
 
} 
 

 
label.bigcheck { 
 
    /* become inline flex-container */ 
 
    display: inline-flex; 
 
    /* center vertically every item */ 
 
    align-items: center; 
 
    /* inverse layout in row */ 
 
    flex-direction: row-reverse; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> 
 

 
<span class="bigcheck"> 
 
    <label class="bigcheck">Short 
 
    <input name="amenities" value="wifi" type="checkbox" class="bigcheck" name="cheese" value="yes"/> 
 
    <span class="bigcheck-target"></span> 
 
    </label> 
 
</span> 
 

 
<span class="bigcheck"> 
 
    <label class="bigcheck">Much longer name 
 
    <input name="amenities" value="personal_video" type="checkbox" class="bigcheck" name="cheese" value="yes"/> 
 
    <span class="bigcheck-target"></span> 
 
    </label> 
 
</span>

ou avec des changements de balisage, où vous placez le texte après l'icône de case à cocher (façon recommandée):

span.bigcheck-target { 
 
    font-family: FontAwesome; 
 
    font-size: 1.2em; 
 
    /* space between icon and label */ 
 
    margin-right: 5px; 
 
} 
 

 
input[type='checkbox'].bigcheck { 
 
    /* don't show standard checkbox */ 
 
    display: none; 
 
    font-size: 2em; 
 
} 
 

 
input[type='checkbox'].bigcheck + span.bigcheck-target:after { 
 
    content: "\f096"; 
 
} 
 

 
input[type='checkbox'].bigcheck:checked + span.bigcheck-target:after { 
 
    content: "\f046"; 
 
} 
 

 
span.bigcheck { 
 
    font-size: 20px; 
 
} 
 

 
label.bigcheck { 
 
    /* become flex-container, putting checkbox on every line */ 
 
    display: flex; 
 
    /* center vertically every item */ 
 
    align-items: center; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> 
 

 
<span class="bigcheck"> 
 
    <label class="bigcheck"> 
 
    <input name="amenities" value="wifi" type="checkbox" class="bigcheck" name="cheese" value="yes"/> 
 
    <span class="bigcheck-target"></span> 
 
    Short 
 
    </label> 
 
</span> 
 

 
<span class="bigcheck"> 
 
    <label class="bigcheck"> 
 
    <input name="amenities" value="personal_video" type="checkbox" class="bigcheck" name="cheese" value="yes"/> 
 
    <span class="bigcheck-target"></span> 
 
    Much longer name 
 
    </label> 
 
</span>

Source

2017-07-18 05:16:49

CSS Checkbox Styling

Répondre

Questions connexes