3

Olá, galera.

Estou querendo colocar o símbolo Δ como radio button, e quando eu clicar nele, ele virar esse outro símbolo ▲. Como faço isso?

1 Resposta 1

2

Você pode usar apenas html+css para fazer isso, de forma bem fácil utilizando o atributo 'for', criei um exemplo básico usando uma class dentro da input radio, veja:

.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/

5
  • Muito obrigado, é isso mesmo! Agora outra perguntinha: Como faço para escolher multiplas opções assim? Vi num lugar que o name tem que ser igual para todas as opções, mas não quer funcionar para mim.
    – raitoringo
    Commented 15/01/2017 às 18:00
  • Escolher multiplas opções? a input radio tem a propriedade de apenas 1 opção por name, no caso de multiplas você deveria usar uma checkbox, ai no caso da checkbox as names devem ser diferentes, atualizei o código para lhe mostrar a diferença entre as 2: jsfiddle.net/leonardorodrigues/5aswn8kz/2 Commented 15/01/2017 às 19:16
  • Aaah, ok. Agora entendi. Valeu! Uma dúvida mais simples agora. Quando vc clica no check, ele se move, aumentando a diferença lateral com os outros, É possível deixá-lo estático, que mude para o triangulo escuro, mas que não se mova como acontece agora? Obrigado.
    – raitoringo
    Commented 16/01/2017 às 20:23
  • O triângulo se meche porque o tamanho, ou width, do triângulo escuro é maior do que do triângulo branco. Você pode definir uma width fixa para a label e alinhar eles no centro, isso provavelmente bastaria para não ter esse efeito de se mover Commented 16/01/2017 às 20:30
  • Ok, muito obrigado por tudo! ;)
    – raitoringo
    Commented 17/01/2017 às 21:54

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .