デフォルトのチェックボックスで何が悪い

オシャンティなサイトだとブラウザがデフォルトで持っているチェックボックスやらプルダウン(セレクトボックス)のデザインが
自分の所と合わないって理由でよく変更されています。
正直JS使ってないんですが、一旦ここに置いておきます。移動させる気はないかも(๑´ڡ`๑)

簡単な考え方

チェックボックス自体の変更ってより、チェックボックスは非表示、または隠してlabelタグでも使えばいいんじゃないですか？
つまりlabelタグに好き勝手やればいいって考え方になります。

CSSのみでやる方法

まずはCSSをのみで実装する方法をば
完成品はこちらです。()

html

<div class="mb20 demo1">
  <input type="checkbox" name="cb" id="checkbox" /><label for="checkbox">選択できます。</label>
</div>

css

.demo1 {
  padding: 6px;
}
  .demo1 input[type=checkbox] {
    display: none;
    margin: 0;
  }
  .demo1 input[type=checkbox]+label {
    position: relative;
    display: inline-block;
    margin-right: 12px;
    font-size: 14px;
    line-height: 30px;
    cursor: pointer;
    padding: 0 0 0 24px;
  }
  .demo1 input[type=checkbox]+label:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    background: url("../img/checkbox.png") no-repeat left top/contain;
  }
  .demo1 input[type=checkbox]:checked + label:before {
    background: url("../img/checkbox-on.png") no-repeat left top/contain;
  }

今回は背景画像を設置していますが
場合によってはCSS3のtransformとか使ってチェックを変えるみたいなのも応用でできます。