0

Quero criar um formulário e nele quero incluir um espécie de "option select" de rádios em HTML, ele deve parece com um semáforo:

  • 3 cores diferentes indicando seus valores (bom, regular e ruim).

Andei pesquisando e encontrei a respeito de mudar todos, porém não encontrei nada sobre mudar a cor de cada um, e esconder 2 rádio dentro de um.

4
  • Cores ou CORS ?
    – Edilson
    Commented 1/11/2015 às 22:03
  • Mostre o html que já têm feito! Para conseguir-mos ajuda-lo a partir desse ponto! Porquê esconder dois radiobox dentro de um?
    – Bruno
    Commented 2/11/2015 às 9:58
  • sim, quero fazer exatamente isto, esconder dois em 1, acho que basicamente só funcionaria com CSS, porém como? Commented 2/11/2015 às 15:28
  • Edilson eu quiz me referir a "Cores" Commented 2/11/2015 às 15:39

2 Respostas 2

3

Na verdade você pode sim. Com o CSS3 foi criado varios pseudo-elementos, com eles nos conseguimos muita flexibilidade e com um pouquinho de criatividade podemos fazer exatamente isso que você quer.

Veja esse exemplo abaixo, nele nós escondemos o radio original do html e recriamos com um nosso usando o pseudo-elemento :before.

Bem simples ne? Espero que ajude

label {
    display: inline-block;
    cursor: pointer;
    position: relative;
    padding-left: 25px;
    margin-right: 15px;
    font-size: 13px;
}

/* Escondemos o radio original */
input[type=radio] {
    display: none;
}

/* Usamos o pseudo-element :before para recriar o novo radio */
label:before {
    content: "";
    display: inline-block;
 
    width: 16px;
    height: 16px;
  
    border-radius:50%;
 
    margin-right: 10px;
    position: absolute;
    left: 0;
    bottom: 1px;
    background-color: #aaa;
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}

/* CSS Responsavel por definir o estilo para radio Checkado */
input[type=radio]:checked + label:before {
    content: "\2022";
    color: #f3f3f3;
    font-size: 30px;
    text-align: center;
    line-height: 18px;
}
<div class="radio">
    <input id="male" type="radio" name="gender" value="male">
    <label for="male">Homem</label>
    <input id="female" type="radio" name="gender" value="female">
    <label for="female">Mulher</label>
</div>

6
  • coloquei para executar o código direto do site, mudou de cor, porém, executei aqui localmente não foi. Commented 2/11/2015 às 15:28
  • Achei o problema, é que roda no Google Chrome, porém, não roda no Mozilla Firefox. Commented 2/11/2015 às 15:36
  • Para firefox a declaração de pseudo elemento é diferente, segue a pagina developer.mozilla.org/pt-BR/docs/Web/CSS/Pseudo-elementos Commented 2/11/2015 às 20:44
  • Para cada navegador você terá que pesquisar as declarações para tender a todos perfeitamente, o CSS3 já é bem implementado por todos. Commented 2/11/2015 às 20:45
  • Tulio o código ele altera a cor de todos os radios, eu quero, 3 radios que iram enviar apenas uma informação que seria entre (bom, regular e ruim), isto é são 3 rádios com 3 cores diferentes bom=verde, regular=amarelo e ruim=vermelha. Commented 3/11/2015 às 20:39
-3

Passei por uma situacao parecida, mas simplesmente mudei a cor utilizando o accent-color. Desse jeitor:

1D

.radio-button-draftPageSimulation input[type="radio" i]{ accent-color:#1E6E79 ; border: 1px solid #1E6E79; }

resolveu meu problema

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 .