html - チェックボックス スタイルが適用されない理由がわかりません

Question

この CSS をチェックボックスに適用しようとしていますが、他の CSS がそれを止めているようです。

他のどの CSS が干渉している可能性があるか、またはそのスタイルをチェックボックスに適用しない理由を特定するにはどうすればよいですか?

これが私のCSSとHTMLのライブデモです

チェックボックスの最後のセットにのみ適用しました。効果はわかりcheckますが、ボックス自体は表示されず、非に設定された古いボックスも表示されます。

Answer 1

上書きされるので

#docContainer .fb-checkbox input

次のスタイル宣言よりも具体的です。

.regular-checkbox

スタイル宣言を次のように変更します

#docContainer .fb-checkbox input.regular-checkbox

以前のスタイルよりも優先されます。

Answer 2

このコードを試してください

input[type="checkbox"] { 
    -moz-appearance: checkbox; -webkit-appearance: checkbox;
    margin-left:3px; border:0; 
    vertical-align: middle;    
    top: -1px;bottom: 1px;
    *overflow: hidden;
    box-sizing: border-box; /* 1 */  
    *height: 13px; /* Removes excess padding in IE 7 */
    *width: 13px;
    backgorund: #ffffff; }

Answer 3

あなたdisplay: noneは他のセレクターによってオーバーライドされます（Patrickの回答を参照）。Firebug では取り消し線が引かれています。これは、ブラウザによって解釈されていないことを意味します。

Firebug http://imageshack.us/scaled/landing/856/ldk8.png

Firebug for Firefox をインストールするか、ブラウザが提供する開発者ツールを使用することをお勧めします。ブラウザによって実際にレンダリングされるスタイルが表示されます。