GUIstrap styled Radio/Checkbox Test

Show a way to styling Radio and checkbox

by T Lindig

HTML

<script src="http://cdn.intern.cm-ag/guistrap-theme-w4b/cdn.js"></script>
<label class="gs-checkbox">
    <input value="" type="checkbox"><i class="gs-icon gs-icon-fw"></i>Option one is this and that—be sure to include why it's great
</label>

<label class="gs-radio">
    <input name="optionsRadios" value="option1" checked="" type="radio"><i class="gs-icon gs-icon-fw"></i>Option one is this and that—be sure to include why it's great
</label>
<label class="gs-radio">
    <input name="optionsRadios" value="option2" type="radio"><i class="gs-icon gs-icon-fw"></i>Option two can be something else and selecting it will deselect option one
</label>

CSS

.gs-checkbox > input[type="checkbox"] {
    display:none;
}

.gs-checkbox > i.gs-icon {
    margin-left: -3px;
}
.gs-radio > i.gs-icon {
    margin-left: -3px;
}

.gs-checkbox > input[type="checkbox"] + i:before {
    content:'\f096';
}
.gs-checkbox > input[type="checkbox"]:checked + i:before {
    content:'\f046';
}

.gs-radio > input[type="radio"] {
    display:none;
}
.gs-radio > input[type="radio"] + i:before {
    content:'\f10c';
}
.gs-radio > input[type="radio"]:checked + i:before {
    content:'\f192';
}