Prevent <button> being clicked without disabling it

Question

On my page i have a <button> with an <input type="number" /> inside, when a user clicks in the <input> or it's spinner buttons the <button>'s click event will fire and the <button> obtains the :active style. Setting <button disabled="disabled"> does prevent click event from firing but the <button> obtains the disabled style.

What i am looking for is how to make the <button> unclickable using simple Javascript, CSS, or HTML without hijacking click events, disabling it, or putting something transparent on top. It should appear normal but when clicked it must not change style or fire a click event.

What i have http://jsfiddle.net/tzu8gLvm/

Answer 1

Your restrictions cover a lot of good solutions. What's wrong with disabled??

But as it happens, there is a CSS way. You can set pointer-events: none on the input, and clicks will just pass through.