新しいブラウザではチェックボックスの幅と高さが変わらない

Question

私はセクション508に準拠する必要があるサイトで作業していますので、チェックボックスのサイズを大きくすると視覚障害のある方に役立ちます。クローム15から（クローム16対）、このスクリーンショットをチェックアウト：

はこれが起こると同じCSSがされるようにされています

input[type="checkbox"] { 
    width: 30px; 
    height: 30px; 
} 

あなたは幅と高さを見ることができるように解釈されます非常に異なっている。誰もがこれを両方のブラウザで動作させる方法を知っていますか？ （IE9も同様のことを右側でやっています）。

Answer 1

実際には、実際のチェックボックスを使用してcross browser solution（これは古い記事ですが、それでもやはり関連性があります）はありません。あなたはCSS3で使うことができるトリックがあります。私が使っているものは、ブラウザにとってはあまりフレンドリーではありません（新しいブラウザが必要です）が、クロスブラウザの方がはるかに優れていますが、まだ100％ではありません。たとえば、IE6をサポートするものは何かを見つけることはできません。このような

何か：

input.checkbox { display: none } 
input.checkbox + label > span.checkbox-span { display: inline-block; color: #FFF; border: 1px solid #000; width: 30px; line-height: 30px; font-size: 24px; text-align: center } 
input.checkbox:checked + label > span.checkbox-span { color: #000 } 

<input type="checkbox" class="checkbox" id="check_1" /> 
<label for="check_1"><span class="checkbox-span">✓</span> Text describing checkbox #1</label> 

非常に基本的な例です。 See the jsFiddle.