html - Chrome 32 でホバー時にチェックボックスが強調表示されない

Question

チェックボックスまたは Firefox または IE のラベルにカーソルを合わせると、チェックボックスが強調表示されたアクティブな状態になり、クリックが影響することを示します。ただし、これは私にとっては動作していないようです。

非常に単純なコードを次に示します。

<label>
    <input type="checkbox"/>
    Sample Check Label
</label>

ここに試してみるフィドルがあります

すべてのブラウザーでチェックボックスがどのようにレンダリングされるかの例を次に示します。

私はクロム32.0.1700.76 mを使用しています

• これは、他の人がクロムで抱えている問題ですか?
• 他の人がこの問題を抱えていない場合は、何が原因である可能性があるか (拡張、追加)
• これは実際にクロムがチェックボックスをレンダリングするために選択する方法ですか?
  • もしそうなら、ブラウザ間の一貫性のための回避策はありますか?

Answer 1

どうやらクロムはネイティブコントロールから遠ざけるために意図的にこれを行っているため、クロムのデフォルトの動作を変更する方法を次に示します。

• CSS属性セレクターを使用して対象inputを絞り込む[type=checkbox]
• CSS:hover疑似クラスを使用して、ホバリング時に条件付きで値を適用する
• Chromeベンダー プレフィックス-webkit-を使用して、ブラウザのみをターゲットにします^†</sup>
• でスタイルしBox-Shadow、insetオプションを使用して影が内側に入るようにします

この CSS を追加します。

input[type=checkbox]:hover {
    -webkit-box-shadow: inset 0 0 2px 2px rgba(82,168,236,.6);
}

ここにフィドルのデモがあります

これが例です*：

†webkit プレフィックスはサファリ ブラウザにも適用されます
**世界にはもっときれいなものがありますが、何もないよりはこれが欲しいです*

Answer 2

Chrome の新しいレンダリングでは、UI がかなり変更されています。

シンプルな CSSpseudo-classを使用して修正するだけです。

フィドル: http://jsfiddle.net/4bpbr/3/

HTML

<label>
    <input type="checkbox"/>
    Sample Check Label
</label>

CSS

input:hover {
    background:#CCC;
}