CSS Forms

by Kaleb Hornsby

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<i class="fa fa-square-o"></i>
<form name="person" action="/echo/json/" method="POST">
    <label class="Control Control--group">
        <span class="Control-label">Salutation: </span>
        <select multiple="" class="Control-input" size="7">
            <option class="Control-option">Mr</option>
            <option class="Control-option">Ms</option>
            <option class="Control-option">Mrs</option>
            <hr />
            <option class="Control-option">Dr</option>
            <optgroup label="test">
                <option class="Control-option">123</option>
            </optgroup>
        </select>
    </label>
    <label class="Control">
        <span class="Control-label">Name: </span>
        <input class="Control-input" name="name" />
    </label>
    <fieldset class="Control Control--group" name="genderFs">
        <legend class="Control-label">Gender:</legend>
        <div class="Control-input">
            <label class="Control-option">
                <input class="Control-optionInput" type="checkbox" name="gender" value="male" checked="" />
                <span class="Control-optionLabel">Male</span>
            </label>
            <label class="Control-option">
                <input class="Control-optionInput" type="checkbox" name="gender" value="female" />
                <span class="Control-optionLabel">Female</span>
            </label>
        </div>
    </fieldset>
    <input type="submit" name="submit" value="submit" />
</form>

CSS

.Control {
    display: block;
    border: none;
    padding: 0;
    margin: 1em 0;
}
.Control-label {
    display: inline-block;
    width: 5em;
    padding: .5em;
}
legend.Control-label {
    float: left;
    margin: 0;
    margin-right: .25em; /* the size of a space char */
}
/* .Control-input.keygen::-webkit-keygen-select, */
.Control-input {
    padding: .5em;
    display: inline-block;
    border: 1px inset;
    width: 10em;
    font-size: inherit;
    font-family: inherit;
    vertical-align: top; /*text-top;*/
    box-sizing: border-box;
    border-radius: 4px;
}
select[size].Control-input,
select[multiple].Control-input {
    /* have to qualify here, otherwise this will
    // mess with the height of input[type=text] elements
    */
    overflow-y: auto;
}
.Control--group .Control-input {
    padding: .5em 0;
}
.Control-option {
    padding: 0 .5em;
    display: table;
    width: 100%;
}
.Control-optionInput::before,
option.Control-option::before {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
    width: 1em;
    content: "\f10c";
}
[type=radio].Control-optionInput:checked::before,
option.Control-option:checked::before {
    content: "\f192";
}
[type=checkbox].Control-optionInput::before,
select[multiple] option.Control-option::before {
    content: "\f096";
}
[type=checkbox].Control-optionInput:checked::before,
select[multiple] option.Control-option:checked::before {
      content: "\f046";
}
option.Control-option {
    display: block;
}
.Control-optionInput, .Control-optionLabel {
    display: table-cell;
}
.Control-optionLabel {
    width: 100%;
}
.Control-optionInput {
    -webkit-appearance: none;
}
.Control-optionInput:checked,
.Control-optionInput:checked ~ .Control-optionLabel {
}
.Control-optionInput:focus,
.Control-optionInput:focus ~...

JavaScript

// TODO: Add optgroup/radio-optgroup