IE9未満でcheckboxをdisplay:noneにしているとlabelをclickしてもチェックされない

inputタグのidとlabelタグのforの値を同じにして関連付けてlabelをクリックした時にもチェックボックスの値が切り替わるようにする。
見た目の調整の都合上チェックボックスは見せたくなかったのでdisplay:noneして、labelのみ表示してたんだけどIE8で動かない。

display:noneするとどうも動かないようで見せたくないだけなら吹っ飛ばせばええんや。というのをStackOverFlowで見つけたのでその対応をした

こういうバッドノウハウ本当に意味がないしどうしようもない。

PSコントローラのボタンっぽくするCSS

○×△□ボタン表示したいな。と思ったんだけど1つ1つ画像表示するのはなんかアホらしいのでCSSでそれっぽくした。

@charset "utf-8";
.ps_button {
    border-radius: 20px;
    background: linear-gradient(#888, #333);
    font-size: 13px;
    font-weight: bold;
    padding: 5px;
}
.maru {
    color: #f00;
}

.sikaku {
    color: #f0f;
}

.sankaku {
    color: #0ff;
}

.batu {
    color: #88f;
}

spanがいいかなと思うのでspanに適当にclassをつけてつかう。

<span class="ps_button maru"></span>