Checkbox test

Testing alignment of checkbox and its label in different browsers (no reset CSS).

by Ilia Draznin

HTML

<div class="check-line">
    <input type="checkbox" id="check1" class="check">
    <label for="check1" class="check-label">Some text here</label>
</div>

CSS

/* reset styles */
body, button, input, select, textarea { font-family: sans-serif; color: #222; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; *overflow: visible; }
table button, table input { *overflow: auto; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }

/* flavor styles */
.check-line { height:32px; line-height:32px; background:#ccc; border:1px solid #666 }
.check-label { font:normal 12px arial; background:#fff }