Question

I used the :active pseudoclass on my buttons to change the padding and border color when clicked. This visually mimics a button press. See an example.

Works in FF. In Chrome, though, the clicks don’t always register. Specifically, if you click-and-hold on the text inside the button, then drag off the text (but still inside the button), the click will not fire. Same goes if you click in the padding, then drag into the text.

I’ve read weird things about buttons and padding in FF vs. Chrome but I can’t figure out how to solve this problem.

Answer 1

Solution: Give it a Single Thing to Click

Adding a position: relative to the button and then overlaying it with a :before pseudo element like so:

button:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

Seemed to resolve the bug for me. See this fiddle. I imagine it resolves the bug (which I do think it is a bug) by giving a single "element" to focus upon when it is clicked.