HTML+CSS I would like to put a radio button as a symbol

Question:

Hi guys.

I'm wanting to put the Δ symbol as a radio button, and when I click on it, it turns into this other ▲ symbol. How do I do that?

Answer:

You can just use html+css to do this, very easily using the 'for' attribute, I created a basic example using a class inside the input radio, see:

.personalizado{
  display:none;
}
.personalizado+label:before{
  content:'Δ';
}
.personalizado:checked+label:before{
  content:'▲';
}

HTML

<input type="radio" id="inputradio" class="personalizado" name="name" value="value">
<label for="inputradio">Something</label>

https://jsfiddle.net/leonardorodrigues/5aswn8kz/

Scroll to Top