Web 上で何度も見たように、CSS を使用してチェックボックスのラベルのスタイルを設定しています。問題は、ラベルをクリックすると Firefox の動作がおかしくなることです。
ボタンを押したままラベルをクリックし、ラベルにとどまっている間に（少しでも）横に移動すると、チェックボックスは選択されません。私がテストした他のすべてのブラウザー (Chrome、Safari、IE) では、これは問題なく動作します。Firefox のこの動作は厄介です。選択中のマウスなどのわずかな動きにより、チェックボックスが期待どおりに選択されないことがあるためです。
障害は私の側にありますか、それとも Firefox 側にありますか? (または、Firefox でのこの動作の背後に正当な理由があるのでしょうか? 私はそれを疑っています。)
HTMLは次のとおりです。
<style>
.mycheckbox:checked + label {
background: red;
}
.mycheckbox-label {
border: 1px solid black;
padding: 20px;
cursor: pointer;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
</style>
<input type="checkbox" id="field1" class="mycheckbox" />
<label for="field1" class="mycheckbox-label">Click!Click!Click!</label>
PS 別の奇妙な動作に気付きました: WebKit ブラウザー (つまり、Chrome と Safari) は、ボタンを押したマウスでパディングからラベルのテキストに移動しない場合、またはその逆の場合にのみ、正しい動作を示します。したがって、パディングにとどまるか、テキストにとどまる限りのみ機能します。したがって、IE は (テストされたものの中で) 正しく動作する唯一のブラウザーです…さらに奇妙な…</p>
*-user-select: nonePS 2. WebKit ブラウザのもう 1 つの奇妙な動作は、 and を設定しているにもかかわらず、ドラッグ中にマウス ポインタが変更されることcursor: pointerです。