title: Putting css borders around radio buttons
body: <p>I'm trying to get a garish red border around some radio buttons, but it is not showing up in Firefox latest or Chrome latest.  Work fine in IE9/IE8.</p>
  
  <p>Each of the input element on my form that are required has a data-val-required attribute put in by MVC3.  All browsers puts in the red borders just dandy when we have a text or textarea inputs, but am struggling with the radio button.  For IE, it works, but other browsers won't put the red border around it.</p>
  
  <p>css:</p>
  
  <pre><code>input[data-val-required], select[data-val-required], textarea[data-val-required]
  {
      background-color: #F0FFFF;
      border: 1px solid red;
  }
  </code></pre>
  
  <p>view-source:</p>
  
  <pre><code>&lt;label for="WaiveSelect"&gt;Do you waive confidentiality?&lt;/label&gt;&lt;br /&gt;
  &lt;input data-val="true" data-val-number="The field WaiveSelect must be a number." data-val-required="Please select waive." id="WaiveSelect" name="WaiveSelect" type="radio" value="0" /&gt; No, I do not waive confidentiality&lt;br /&gt;
  &lt;input id="WaiveSelect_2" name="WaiveSelect" type="radio" value="2" /&gt; Yes, I waive confidentiality&lt;br /&gt;
  &lt;input id="WaiveSelect_3" name="WaiveSelect" type="radio" value="3" /&gt; Yes, I waive confidentiality except to the client&lt;br /&gt;
  &lt;span class="field-validation-valid" data-valmsg-for="WaiveSelect" data-valmsg-replace="true"&gt;&lt;/span&gt;
  </code></pre>
  
  <p>What it looks like in IE (Firefox and Chrome shows no borders):
  <img src="https://i.stack.imgur.com/AN54U.png" alt="enter image description here"></p>