Deepal Deepal - 6 months ago 10
HTML Question

Exclude Checkbox from anchor HTML/CSS

In my web application, I need an html list of links with a checkbox in front of each. I need to make the list so that a user can click on anywhere on the

<li>
other than only on the text to visit the link. But I need the checkbox to be excluded from the link and be checked/unchecked independently so that clicking on the checkbox does not make the link click.

enter image description here

For my purpose I created the markup as follows:

<a href='projecthome.php?pid=1'>
<li>
<input type='checkbox' name='chkproject' value='project'/>&nbsp;&nbsp;&nbsp;&nbsp;Example
</li>
</a>


This works perfectly in Chrome and I can check/uncheck the checkbox without triggering link click. But in firefox, when I click on the checkbox, link click triggers and browser directs to the link. How can I prevent this? Is there any other alternative way other than my html markup to prevent this?

Thank you.

Answer

I agree with James but failing that you can accomplish by using the property:

pointer-events: none;