Edit in JSFiddle

<div>
  <h2>radio button test</h2>
  <input id="r1" type="radio" class="black-and-white" name="param1"/>
  <label for="r1">Radio 1</label>

  <input id="r2" type="radio" class="black-and-white" name="param1"/>
  <label for="r2">Radio 2</label>
  
  <input id="r3" type="radio" class="black-and-white" name="param1"/>
  <label for="r3">Radio 3</label>
</div>

<br/><br/>

<div>
  <h2>checkbox test</h2>

  <input id="c1" type="checkbox" class="black-and-white" name="param2"/>
  <label for="c1">Checkbox 1</label>

  <input id="c2" type="checkbox" class="black-and-white" name="param2"/>
  <label for="c2">Checkbox 2</label>
  
  <input id="c3" type="checkbox" class="black-and-white" name="param2"/>
  <label for="c3">Checkbox 3</label>
</div>

.black-and-white{
  display: none;
}

.black-and-white+label{
  color: black;
  border: 1px black solid;
  background-color: white;
  padding: 4px;
}

.black-and-white:checked+label{
  color: white;
  border: 1px black solid;
  background-color: black;
}