Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add hanging indent to the labels of a checkbox customized with custom icons in CSS?

I am trying to customize the look of my checkboxes using font-awesome and to have all the text of the labels correctly indented. I have customized the look of the checkboxes which makes the usual approaches to indent the text not working as I am hiding the actual checkbox (see the CSS below).

Currently, I obtain the following (left) while I would like the one on the right:

Current viewDesired view

I used the following code (see the JSFiddle):

CSS

Inspired by this simple CSS checkboxes, I use the following to format my checkboxes with font-awesome:

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>

I have tried to modify the margin-left and text-indent attributes of the label and label:before selectors but without any success.

Any idea how I could have the correct indent while using the nice font-awesome icons?

Thank you very much for your help!

like image 517
nbeuchat Avatar asked May 26 '15 08:05

nbeuchat


People also ask

How do I insert a checkbox and label on the same line?

Method 1: By making the position of checkbox relative, set the vertical-align to the middle can align the checkboxes and their labels. Here, we have made the position of the checkbox relative to the label. So the checkboxes are aligned according to the label.

How can change checkbox checked icon in CSS?

Click the HTML/CSS Editor link. Copy and paste the below CSS code in the field on the Custom CSS tab. Then, simply replace the hex color code #F06586 with whichever color you want. Under Layout > Layout Options tab, make sure the option to Use Default Browser Icons for Radio Buttons and Checkboxes is unchecked.


2 Answers

Add this style (tested both on Chrome and Firefox)

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

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


Final result:

enter image description here

like image 51
Fabrizio Calderan Avatar answered Sep 27 '22 00:09

Fabrizio Calderan


Based on the answer by Fabrizio Calderan, I used the following modifications to the CSS:

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

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

The advantage is that it does not modify the spacing between the items. You can see the final results in JSFiddle.

like image 33
nbeuchat Avatar answered Sep 27 '22 00:09

nbeuchat