Radio button- Change action/sign when selected

Question

I'm using Gravity form for a product. I've successfully removed the radio button (as I'd like to use the images as buttons instead).

The only way it indicates something has been selected, is by making the text bold.

This is not obvious enough.

Here is the site

Can I add a green TICK or somehow give the selected image a border?

Here's what I mean Screenshot

Answer 1

Your question is rather vague, as we don't have a lot of information about the end result. However, I've done this many times, and here's how it could be done:

label {
  cursor: pointer;
  } /* Change cursor when the label is hovered */

input[type=radio] {
  display: none;
  } /* Hide the ugly default radio styling */

label > span {
  display: none;
  } /* Hide the checkmark by default */

input[type=radio]:checked + span{
display: inline;
  color: green;
  } /* Show the checkmark when the radio is checked */

<label><input type="radio" name="obvious"><span>✓</span> I'm rather obvious.</label><br/>
<label><input type="radio" name="obvious"><span>✓</span> I'm rather obvious.</label><br/>
<label><input type="radio" name="obvious"><span>✓</span> I'm rather obvious.</label><br/>
<label><input type="radio" name="obvious"><span>✓</span> I'm rather obvious.</label>

I hope this helps. If you need anything else, comment below.