Clickable Text To Replace Radio buttons

This is an css question, so really this is not the right place for it.

However, you need to use the + operator and the :checked selector like this:

(This assumes your radio buttons are built like this):

<input type="radio" id="my_awesome_radio_1" value="value1" />
<label for="my_awesome_radio_1">Value 1</label>
<input type="radio" id="my_awesome_radio_2" value="value2" />
<label for="my_awesome_radio_2">Value 2</label>
<input type="radio" id="my_awesome_radio_3" value="value3" />
<label for="my_awesome_radio_3">Value 3</label>

CSS-Code:

input[type=radio] {
   display:none;
}

input[type=radio] + label {
   display: inline-block;
   border: 1px solid #eee;
   padding: 10px;
   margin-right: 10px;
   color: #eee;
}

input[type=radio]:checked + label {
   background: #eee;
   color: #000;
}