CODEWITHSUNDEEP
htmlcssfont-awesome
dangre00
dangre00

Reputation: 450

CSS3 styled checkboxes - attempting to indent / left-justify the label text to the right of checkbox

I have CSS3 styled checkboxes using fontAwesome. The one little formatting problem I'm running into is the text wrap goes underneath the checkbox. Here is the code and fiddle:

CSS:

@import url(//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css);

.wrapper {
  width:300px;
}
input[type=checkbox].with-font {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
input[type=checkbox].with-font ~ label:before {
    font-family: FontAwesome;
    display: inline-block;
    content: "\f1db";
    letter-spacing: 10px;
    font-size: 1.2em;
    color: #535353;
    width: 1.4em;
}
input[type=checkbox].with-font:checked ~ label:before  {
    content: "\f00c";
    font-size: 1.2em;
    color: darkgreen;
    letter-spacing: 5px;
}
input[type=checkbox].with-font ~ label:before {        
    content: "\f096";
}
input[type=checkbox].with-font:checked ~ label:before {
    content: "\f046";        
    color: darkgreen;
}

HTML:

<div class="wrapper">
    <input id="box1" type="checkbox" class="with-font" />
    <label for="box1">This is very long text that will wrap underneath the checkbox. Not sure how to flush it properly.</label>
</div>

JS Fiddle

Ideally I would like to indent and justify the text, like this:

enter image description here

I have tried a few methods, such as wrapping in a table and left-floating divs, but it seems to break the CSS when I try to separate the label from the checkbox. Any direction is much appreciated!

Upvotes: 0

Views: 675

Answers (1)

Sylogista
Sylogista

Reputation: 585

Like that? ;)

HTML:

<div class="wrapper">
  <input id="box1" type="checkbox" class="with-font" />
  <label for="box1">
    <span class=text>
      This is very long text that will wrap underneath the checkbox.     Not sure how to flush it properly.
    </span>
  </label>
</div>

CSS:

    @import url(//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css);
    .wrapper {
      width: 300px;
      text-align: justify;
      text-justify: inter-word;
    }

    input[type=checkbox].with-font {
      border: 0;
      clip: rect(0 0 0 0);
      height: 1px;
      margin: -1px;
      overflow: hidden;
      padding: 0;
      position: absolute;
      width: 1px;
    }

    input[type=checkbox].with-font ~ label:before {
      font-family: FontAwesome;
      display: inline-block;
      content: "\f1db";
      letter-spacing: 10px;
      font-size: 1.2em;
      color: #535353;
      width: 1.4em;
    }

    input[type=checkbox].with-font:checked ~ label:before {
      content: "\f00c";
      font-size: 1.2em;
      color: darkgreen;
      letter-spacing: 5px;
    }

    input[type=checkbox].with-font ~ label:before {
      content: "\f096";
    }

    input[type=checkbox].with-font:checked ~ label:before {
      content: "\f046";
      color: darkgreen;
    }

    .text {
      margin-left: 10px;
      position: absolute;
      width: 250px;
    }

https://jsfiddle.net/0vpcwo53/

Changelog:

  • In html This is very... is now surrounded by <span class=text></span>
  • In css changes in .wrapper
  • In css added .text

And that's all.

Upvotes: 1

Related Questions