HTML+CSS Wanted to put a radio button as a symbol

Asked

Viewed 594 times

3

Hey, you guys.

I’m wanting to put the symbol Δ as radio button, and when I click on it, it flip that other symbol . How do I do this?

html css

1 answer

2

You can only use html+css to do this, very easily using the 'for' attribute, I created a basic example using a class inside the radio input, 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/

  • Thank you very much, that’s right! Now another little question: How do I choose multiple options like this? I saw in a place that name has to be the same for all options, but it doesn’t want to work for me.

  • Choose multiple options, huh? radio input has the property of only 1 option per name, in the case of multiples you should use a checkbox, then in the case of checkbox Names should be different, I updated the code to show you the difference between the 2: https://jsfiddle.net/leonardorodrigues/5aswn8kz/2/

  • Aaah, ok. Now I get it. Thanks! A simpler question now. When you click on the check, it moves, increasing the lateral difference with others, Is it possible to leave it static, change to the dark triangle, but not move as it happens now? Thank you.

  • The triangle moves because the size, or width, the dark triangle is larger than the white triangle. You can define a width fixed to the label and align them in the center, it would probably be enough to not have that effect of moving

  • Okay, thank you so much for everything! ;)

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.