html - What is the "correct" behavior for elements inside of a ? -

html - What is the "correct" behavior for elements inside of a <button>? -

i trying prepare bug file input within of button element not working on firefox/ie. <input> beingness made extremely big opacity set 0 allowed whoever wrote markup create custom-styled "browse" button.

this worked fine in chrome, safari, , opera (which happen running webkit/blink). clicking on button transparently click on "browse..." button nested <input>, firefox , ie had different behaviors. fixed issue making input hidden , not kid of button, calling click event when button clicked.

this had me curious though , set tests see works , doesn't: jsfiddle.

(if fiddle ever happens go away, here contents:

html:

<button> <label for="checkbox-input">click me</label> <input id="checkbox-input" type="checkbox"/> </button> <button> <input type="text"/> </button> <button> <input type="color"/> </button> <button> <a href="#test">test</a> </button> <button> <span id="clicky">testing!</span> </button> <button> <span class="crosshair">testing!</span> </button>

css:

.hidden { opacity: 100; } button { cursor: pointer; } .crosshair { cursor: crosshair; }

js:

$('#clicky').on('click', function() { alert('clicky'); });

it seems though in chrome, safari, , opera, click through button , trigger click event on both button , nested element. firefox clicks button. ie clicks button, displays cursor when hovering on nested element.

allowed content button according spec:

phrasing content, there must no interactive content descendant.

the input element falls under both phrasing , interactive content. based off of information, of these browsers display right behavior?

you can't have input element within button. html broken. there no way determine if of browsers behave correctly or not.

html w3c