CodePen

HTML

            
              <form>
  <ul>
  <li>
    <input type="radio" name="rd" value="" id="r1"> 
    <label for="r1">First</label>
  </li>
  <li>
    <input type="radio" name="rd" value="" id="r2" checked> 
    <label for="r2">Second</label>
  </li>
  <li>
    <input type="radio" name="rd" value="" id="r3"> 
    <label for="r3">Third</label>
  </li>
  <li>
    <input type="text" id="other"> 
    <labe for="other">Other</label>
  </li>
</ul>
  
  <ul>
  <li>
    <input type="checkbox" name="Banana" value="Banana" id="r1"> 
    <label for="Banana">Banana</label>
  </li>
  <li>
    <input type="checkbox" name="Apple" value="Apple" id="Apple" checked> 
    <label for="Apple">Apple</label>
  </li>
  <li>
    <input type="checkbox" name="dew" value="dew" id="dew" checked> 
    <label for="dew">Honey Dew</label>
  </li>
</ul>
  <p>
    <select>
      <option>red</option>
      <option selected>green</option>
      <option>blue</option>
    </select> <label> Select one</label>
  </p>
  <p><input type="submit" value="submit"><label>submit</label> <input type="reset" value="reset"><label>Reset</label>
</form>
            
          
!

CSS

            
              input:default + label:after {
   content: ' (default)';
   color: #999;
   font-style: italic;
}
select {
   background: red;
   width: 268px;
   padding: 5px;
   font-size: 16px;
   -webkit-appearance: none; 
}
option {
  /* how do you style a select? */
  /* you can't target the label - has a different parent */
   -webkit-appearance: none; 
  background: green;
  display: none;
  
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................