How to get Firefox click behaviour to work properly with CSS styled checkbox (and some related problems in WebKit)?

问题

I am using CSS to style the label of a checkbox as I have seen many times on the web. The problem is that Firefox behaves strange when it comes to clicking on the label.

If one clicks on the label while holding down the button and moves (even slightly) to the side while still staying on the label, then the checkbox doesn’t get selected. In all other browsers I tested (Chrome, Safari, IE) this works just fine. This behavior of Firefox is annoying, since it leads to the checkbox sometimes not being selected as expected, due to a minor movement of the mouse or so while selecting.

Is the fault on my side or on the Firefox side? (Or is there even a good reason behind this behavior in Firefox? I doubt it.)

Here is the 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>

P.S. I just realized another strange behavior: WebKit browsers (i.e. Chrome and Safari) show the right behavior only if you do not move with the pressed-button mouse from padding onto the text of the label or vice versa. So it only works as long as you stay on the padding or as you stay on the text. So, IE is the only browser (of those tested) that really gets the behavior right… even more strange…

P.S. 2. Another strange behavior in WebKit browsers is that they change the mouse pointer while dragging even though I have the *-user-select: none and cursor: pointer set.

来源：https://stackoverflow.com/questions/16747945/how-to-get-firefox-click-behaviour-to-work-properly-with-css-styled-checkbox-an

标签

css

firefox

checkbox