HTML label with different behaviour on Safari - css

Question

I have a checkbox and a label for it, and within a label there is an input box. When I write something in input box, I don't expect checkbox to toggle (enable/disable). On Chrome and Firefox it works fine, but on Safari selecting input within label also toggles the checkbox.
How can I prevent this from happening?
Here is my code:
<div>
<input type="checkbox" name="xyz" id="xyz">
<label for="xyz">
<input type="number" name="qty" id="qty">This is my label for xyz checkbox, Click on Qty should not enable/disable the checkbox
</label>
</div>

Answer 1

The best solution is probably to move <input type="number"> outside <label>.
Example:
<div>
<input type="checkbox" name="xyz" id="xyz">
<p>
<input type="number" name="qty" id="qty">
<label for="xyz">
This is my label for xyz checkbox, Click on Qty should not enable/disable the checkbox
</label>
</p>
</div>
Remember that all form elements should have a corresponding label.
Read more about labels:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

Answer 2

I suspect malformed HTML that is being fixed by Chrome/Firefox for you, but not fixed correctly in Safari. You should inspect the div in the debugger in each browser and see what each DOM gives you to be sure.
You have:
<div>
<input type="checkbox" name="xyz" id="xyz">
<label for="xyz">
<input type="number" name="qty" id="qty">This is my label for xyz checkbox, Click on Qty should not enable/disable the checkbox
</label>
</div>
You could do this instead with the same intent:
<div>
<input type="checkbox" name="xyz" id="xyz">
<label for="xyz">
This is my label for xyz checkbox
<input type="number" name="qty" id="qty"/>
</label>
</div>