PNGの背景画像でスタイリングしているラジオボタンがいくつかあり:hover、背景画像を周囲のハローのあるものと交換するために使用しています。隣接するラジオボタンのハロー領域は重なっているため、クリック可能な領域の一部にしないでください。それでも、それらは同じイメージの一部です。
理想的には、パディング領域の後ろにハローを表示したいので、各ラジオボタンのコンテンツ領域はクリック可能である必要がありますが、パディングは必要ありません。これを制御するCSS属性が見つかりません。このpointer-events属性はほとんど必要ですが、完全ではありません。その値のほとんどは、とにかくSVGにのみ適用されます。
グーグル検索が明らかにするのは、パディングを使用してクリック可能な領域を小さくするのではなく大きくする方法へのポインタです。必要に応じてCSS3のみの属性を使用できますが、HTMLにマークアップを追加したくありません。
明るいアイデアはありますか？
残念ながら、これは追加のマークアップを追加しないと不可能です。sを使用していた場合div、背景画像を含む疑似要素を追加できますが、input要素 (:beforeおよび:after) では残念ながらそれはできません。
背景画像を処理するラッパー div を追加する必要があります: http://jsfiddle.net/sQGV9/
また、これが引き起こす可能性のあるユーザビリティの問題に注意してください。通常、ホバー効果は要素がクリック可能であることを意味するため、jsfiddle に を追加して、cursor: pointerクリックするはずの正確な領域を明確にしました。
実現したいハロー効果のある画像を添付すると、css3 で効果を実現できる可能性があり、余分なマークアップが不要になります。
if your border or padding is thicker, then You can keep a new div on it with the position absolute,higher z-index and the alignments using 'top' and 'left'