title: :focus styling on custom radio input
body: <p>I have a custom radio input style that is implemented more or less like this:</p>
  
  <pre><code>&lt;input type="radio" id="testradio" class="visuallyhidden custom-radio"&gt;
  &lt;label for="testradio"&gt;...&lt;/label&gt;
  
  .custom-radio + label:before {
    content: ""
    // Styling goes here
  }
  
  .custom-radio:focus + label:before {
    outline: 1px solid black;
  ]
  </code></pre>
  
  <p>This works great except for one nagging detail: the focus style for keyboard navigation. I can tab-select the group of radio buttons and use the arrow keys to change the selected one, but the default :focus outline doesn't appear because the input tag is hidden.</p>
  
  <p>I tried adding my own focus style as above, but this ends up behaving differently than the default browser styling. By default, Chrome (and other browsers I assume) will draw an outline only when you are keyboard-selecting the radio inputs, not when you click them. However, the CSS :focus style seems to apply when clicking the radio input as well (or in this case, clicking the label), which looks really bad.</p>
  
  <p>Basically my question is this: how do I apply a :focus style to a radio input that fully simulates the default browser behavior, i.e. does not appear from a mouse click focus? Or is there another way I can customize this radio input that will help me preserve the default behavior?</p>
  
  <p>Edit: Here's a JSFiddle demonstrating what I'm talking about. On the first row, you can click a radio button and then navigate with the arrow keys - the outline only appears when you use the keyboard. On the second row, clicking the radio button immediately triggers the focus style.</p>
  
  <p><a href="http://jsfiddle.net/7Ltcks3n/1/">http://jsfiddle.net/7Ltcks3n/1/</a></p>