現在カーソルを合わせているチェックボックスを分かりやすくする

チェックボックスがたくさん並んでいるときに、現在 選択/解除 しようとしている要素がどれか明確にして、使い勝手をよくします。

html

<label>
    <input type="checkbox" value="">
    この要素を選択します
</label>

CSS

label:hover {
   background-color: #DDD;
   cursor: pointer;
   padding: 5px;
}