css3チェックボックスのスタイリングが余分な入力で機能しない

Question

イメージを使用してチェックボックスのスタイルを設定したいが、チェックボックスがカミソリで生成されているため、余分な隠し入力が作成されるため、彼らはもはや隣接兄弟セレクタであるとして

入力[タイプ=チェックボックス] +ラベル

はもはや機能しません。

は、非表示の入力とスタイリング作品を削除するが、これは私が前にかみそりで、この問題を持っていた私のためにここに http://jsfiddle.net/4huzr/2434/

.yesno input[type=checkbox] + label { 
    background-image: url(http://placehold.it/40x40/ff6633/000000?text=yes); 
    height: 40px; 
    width: 40px; 
    display: inline-block; 
    padding: 0px; 
    } 

Answer 1

フィドルオプションではありません。私はそうのように別の+セレクタを追加する必要がありました：

.yesno input[type=checkbox] + input + label { 
    background-image: url(http://placehold.it/40x40/ff6633/000000?text=yes); 
    height: 40px; 
    width: 40px; 
    display: inline-block; 
    padding: 0 0 0 0px; 
} 

あなたはここで働い例を参照することができます：それはベストではないのですが、それは私が過去に見つかった最も簡単な解決策だった http://jsfiddle.net/4huzr/2437/

を:)

@Lgsonに言及したように、~セレクタを使用できます。

.yesno input[type=checkbox] ~ label