CSS Checkbox Styling

Question

Ich arbeite an einem CSS-Anreden Styling. Die Dinge sehen ziemlich gut aus, aber ich habe ein Problem. Wenn das Textfeld sehr viel Text enthält, werden die Felder inkonsistent ausgerichtet.

Wie würde ich meinen Code unten ändern, damit das Kontrollkästchen auf der LINKEN Seite des Textes erscheint, damit die Dinge konsistent sind?

ist hier ein 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>

Answer 1

ich mit dieser Lösung kam:

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>

Answer 2

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

Und entfernen: span.bigcheck-target:margin-top: 20px!important;

Answer 3

Zuerst muss Ihr HTML ein wenig Nacharbeit. Verwenden Sie div Elemente, um die Zeilen zu erstellen. Geben Sie Ihre input Elemente id Werte und dann die label Elemente, so dass sie diese input Elemente mit dem for Attribut nicht umbrechen müssen.

Dann einfach eine einheitliche Breite für die Etiketten:

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>

Answer 4

Legen Sie Ihre Inhalte nach dem "Input" und "span"

Und Ihre Benutzer daran zu hindern, Hervorhebung Ihres Inhalts:

.bigcheck { user-select: none; } 

Answer 5

Sie haben Ihren Code mit flexbox umgeschrieben.

Sie können dies erreichen, ohne Markup zu ändern:

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>

Oder mit Markup-Änderungen, in dem Sie Text nach Checkbox-Symbol platzieren (empfohlene Methode):

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>