Discussion on CSS3 checkbox and radio styles with Font Awesome

lesh1j

lesh1j supports this item

Supported

5 comments found.

Your example page is giving the following error: http://www.dumpt.com/img/viewer.php?file=fkk0gfcxgzcwxi8mca9y.jpg when noscript is installed. Noscript says you are requesting LAN resources.

Needless to say, I did not allow it. You may want to look into this issue, as this is a default setting of noscript, which is a very popular FireFox addon.

Hello we need to display a list of checkbox inline. We have tried but have some issues. We need to display as tag list that probabilly go to many lines

Can you help me?

Ps compliments

Good day! If I understand correctly, then you can:
screenshot:
http://postimg.org/image/e68ff1mg9/
html:

<div class="tags">
    <div class="tag-item">
        <input type="checkbox" class="radiocheck" name="checkbox1" id="checkbox1" /><label class="full small left" for="checkbox1">One</label>
    </div>
    <div class="tag-item">
        <input type="checkbox" class="radiocheck" name="checkbox2" id="checkbox2" /><label class="full small left" for="checkbox2">Two</label>
    </div>
    <div class="tag-item">
        <input type="checkbox" class="radiocheck" name="checkbox3" id="checkbox3" /><label class="full small left" for="checkbox3">Three</label>
    </div>
    <div class="tag-item">
        <input type="checkbox" class="radiocheck" name="checkbox4" id="checkbox4" /><label class="full small left" for="checkbox4">Four</label>
    </div>
    <div class="tag-item">
        <input type="checkbox" class="radiocheck" name="checkbox5" id="checkbox5" /><label class="full small left" for="checkbox5">Five</label>
    </div>
    <div class="tag-item">
        <input type="checkbox" class="radiocheck" name="checkbox6" id="checkbox6" /><label class="full small left" for="checkbox6">Six</label>
    </div>
    <div class="tag-item">
        <input type="checkbox" class="radiocheck" name="checkbox7" id="checkbox7" /><label class="full small left" for="checkbox7">Seven</label>
    </div>
    <div class="tag-item">
        <input type="checkbox" class="radiocheck" name="checkbox8" id="checkbox8" /><label class="full small left" for="checkbox8">Eight</label>
    </div>
    <div class="tag-item">
        <input type="checkbox" class="radiocheck" name="checkbox9" id="checkbox9" /><label class="full small left" for="checkbox9">Nine</label>
    </div>
    <div class="tag-item">
        <input type="checkbox" class="radiocheck" name="checkbox10" id="checkbox10" /><label class="full small left" for="checkbox10">Ten</label>
    </div>
    <div class="tag-item">
        <input type="checkbox" class="radiocheck" name="checkbox11" id="checkbox11" /><label class="full small left" for="checkbox11">Eleven</label>
    </div>
</div>
css:
.tags {
  width: 390px;
  margin: 0 auto;
}
.tag-item {
  float: left;
  margin: 5px;
}
.tag-item input.radiocheck+label {
  width: 50px;
  display: block;
}

Preview is broke

Thanks , I fixed , now works

Does this work with Wordpress?

Can I change the color of the checkboxes?

Good day! This can work with WordPress, but it is not a worpress plugin. Yes, the color of the checkboxes you can change to CSS.

Very nice, GLWS!

by
by
by
by
by
by