CSS Checkbox Styling

Question

I'm working on styling a CSS checkbox. Things are looking pretty good but I have one issue. If the box label is a lot of text the boxes end up inconsistently aligned.

How would I change my code below to have the check box be on the LEFT side of the text so things are consistent?

Here is a 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

I came up with this 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> 

Answer 2

Rewritten you code using flexbox.

You can achieve this without changing markup:

 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> 

Or with markup changes, where you place text after checkbox icon (recommended way):

 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> 

Answer 3

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

And remove : span.bigcheck-target:margin-top: 20px!important;

Answer 4

First, your HTML needs a bit of reworking. Use div elements to create the rows. Give your input elements id values and then use the label elements so that they don't have to wrap those input elements by using the for attribute.

Then, simply set a unified width for the labels:

 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 5

Put your content after your "input" and "span"

And to stop your users from highlighting your content use:

.bigcheck { user-select: none; }