Bootstrap CSS only Checkbox

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
    <input type="checkbox" id="1" class="checkbox" />
    <label for="1">SMS</label>

    <input type="checkbox" id="2" class="checkbox" checked />
    <label for="2">Default Checked</label>

    <input type="checkbox" id="31" class="checkbox" disabled />
    <label for="31">Disabled</label>

    <input type="checkbox" id="32" class="checkbox" checked disabled />
    <label for="32">Disabled</label>

CSS

input[type="checkbox"].checkbox {
    display: ff;
}
input[type="checkbox"].checkbox + label {
    display: inline;
    position: relative;
    background-color: #b94a48;
    
    /*label styling*/
    padding: 2px 4px;
    font-size: 11.844px;
    font-weight: bold;
    line-height: 14px;
    color: #ffffff;
    vertical-align: baseline;
    white-space: nowrap;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
input[type="checkbox"].checkbox:checked + label {
    background-color: #468847;
}

input[type="checkbox"].checkbox:disabled + label {
    opacity: 1; color:#020202; background:#ccc;
}