lundi 17 juillet 2017

CSS Checkbox Styling

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?

Thanks for any help! :)

Here is a JSFiddle: http://ift.tt/2utkxUV

HTML

 <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>

CSS

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
}




Aucun commentaire:

Enregistrer un commentaire