Back home

Custom form controls

The Markup

CSS

.field {
    margin:0 0 10px;
    overflow: hidden;
}

.field.gender{
    background:#fefefe;
    width: 60px;
    border-radius: 3px;
}

.field .inline{
    display: block;
    float: left;
    height:30px;
}

label{
    display: inline;
    cursor: pointer;
    color:#b4b5b7;
    font: 12px/20px sans-serif;
}

#foo:checked:before,
input[type="checkbox"],
input[type="radio"] {
    position:absolute;
    clip: rect(0,0,0,0);
    clip: rect(0 0 0 0);
}

#foo:checked,
input[type="checkbox"] + label:before {
    content: url(checkbox.png);
}

input[type="checkbox"]:checked + label:before {
    content: url(checkbox-checked.png);
}

#foo:checked,
.male input[type="radio"] + label:before {
    content: url(radio-male.png);
}

.male input[type="radio"]:checked + label:before {
    content: url(radio-checked-male.png);
}

#foo:checked,
.female input[type="radio"] + label:before {
    content: url(radio-female.png);
}

.female input[type="radio"]:checked + label:before {
    content: url(radio-checked-female.png);
}

input[type="checkbox"] + label:before,
input[type="checkbox"]:checked + label:before{
    margin-right:5px;
    position:relative;
    top:3px;
    left:0px;
}

input[type="radio"] + label:before,
input[type="radio"]:checked + label:before {
    position:relative;
    top:0;
    left:0;
}