title: How to avoid click on <input> within an <a> from triggering click event on <a> without Javascript/jQuery?
body: <p>Given some HTML that looks like this:</p>
  
  <p><code>&lt;a&gt;&lt;label&gt;&lt;input type="checkbox" /&gt;&lt;/label&gt;link text&lt;/a&gt;</code></p>
  
  <p>How, without coding, can I avoid a click on the <code>input</code> checkbox from triggering a click event on the <code>a</code>?</p>
  
  <p>I'm using the <code>label</code> to enlarge the checkbox click target, and for reasons not worth going into, I <em>need</em> the <code>input</code> to be inside the <code>a</code> tag. I've tried setting <code>z-index</code> on the <code>label</code> and <code>input</code> to a higher value than the <code>a</code>, but that makes no difference.</p>
  
  <p>The only method I've thought of is to track whether the <code>input</code> is being checked and, if so, ignore a click on the <code>a</code> (I am handling clicks on the <code>a</code> via jQuery anyway). Here's a full example, with HTML, CSS, and Javascript (jsFiddle --> <a href="http://jsfiddle.net/forgetcolor/wQEjk/" rel="nofollow">http://jsfiddle.net/forgetcolor/wQEjk/</a>):</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;a&gt;&lt;label&gt;&lt;input type="checkbox" /&gt;&lt;/label&gt;link text&lt;/a&gt;
  &lt;div id="output"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>label {
      padding:5px 15px;
      border:1px solid blue;
  }
  a {
      padding:5px;
      border:1px solid red;
      background-color:#eee;
  }
  
  a:hover { background-color:#ddd; }
  #output { margin: 10px; }
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>var checkboxclicked = false;
  
  $('a').click(function() { 
      if(checkboxclicked) return;
      $('#output').text("link got click");
      setTimeout(function() {
          $('#output').text("");
      }, 500);
  });
  
  $('input, label').click(function() {
      checkboxclicked = true;
      setTimeout(function() {
          checkboxclicked = false;
      }, 250);
  });
  </code></pre>
  
  <p>With this example, I get what I want---meaning that a click anywhere within the large target of the <code>label</code> tag triggers ONLY a click on the checkbox, while a click on the <code>a</code> outside of the <code>label</code> triggers a click on the <code>a</code> only.</p>
  
  <p>But I can't help thinking there's a way of doing this purely in CSS. Is there?</p>