css

custom_radios

<form>
  <ul>
	<li data-value="true">  
	  <input type="radio" value="true" name="choice" id="true"> 
            <label for="true" tabindex=-1>True</label>
       </li>
       <li data-value="false">
	  <input type="radio" value="false" name="choice" id="false"> 
          <label for="false" tabindex=-1>False</label>    
       </li>
</ul>
</form>

ul, li { margin: 0; padding: 0; }

li { list-style: none; width: 200px; display: inline; margin-right: 20px; }


input[type=radio] { 
  cursor: pointer; 
  -webkit-appearance: none; /* hide radio button */
  -moz-appearance: none;
  width: 15px;
}

label {
  padding: 8px 20px;
  border: 1px dashed black;
  background: white;
  width: 200px;
  margin-left: -25px;
  cursor: pointer;
}

input[value=false]:checked + label {
  background: red;
}

input[value=true]:checked + label {
  background: green;
}



/* Ignore */
body { text-align: center; margin-top: 50px; }
/* End Ignore */