6

Preciso fazer um quiz, e as alternativas são inputs do tipo radio, mas parece checkbox personalizado.

Qual a melhor forma de fazer isso?

inserir a descrição da imagem aqui

.tabs-below > .nav-tabs,
.tabs-right > .nav-tabs,
.tabs-left > .nav-tabs {
    border-bottom: 0;
}

.tab-content > .tab-pane,
.pill-content > .pill-pane {
    display: none;
}

.tab-content > .active,
.pill-content > .active {
    display: block;
}

.tabs-below > .nav-tabs {
    border-top: 1px solid #ddd;
}

.tabs-below > .nav-tabs > li {
    margin-top: -1px;
    margin-bottom: 0;
}

.tabs-below > .nav-tabs > li > a {
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px;
}

.tabs-below > .nav-tabs > li > a:hover,
.tabs-below > .nav-tabs > li > a:focus {
    border-top-color: #ddd;
    border-bottom-color: transparent;
}

.tabs-below > .nav-tabs > .active > a,
.tabs-below > .nav-tabs > .active > a:hover,
.tabs-below > .nav-tabs > .active > a:focus {

}

.tabs-left > .nav-tabs > li,
.tabs-right > .nav-tabs > li {
    float: none;
}

.tabs-left > .nav-tabs > li > a,
.tabs-right > .nav-tabs > li > a {
    text-align: center;
    border: none !important;
    min-width: 54px;
    height: 25px;
    margin-right: 0;
    margin-bottom: 3px;
}

.tabs-right > .nav-tabs {
    float: right;
    margin-left: 19px;
}

.tabs-right > .nav-tabs > li > a {
    margin-left: -1px;
    margin-bottom: 7px;
    background-color: #1d1715;
    color: white;
    font-family: 'Citroen-bold-italic';
    font-size: 12pt;
    opacity: 0.5;
    padding: 3px;
}

.tabs-right > .nav-tabs > li > a:active {
}

.tabs-right > .nav-tabs > li > a:hover,
.tabs-right > .nav-tabs > li > a:focus {
    background-color: #f1ba26;
}

.tabs-right > .nav-tabs .active > a,
.tabs-right > .nav-tabs .active > a:hover,
.tabs-right > .nav-tabs .active > a:focus {
    background-color: #f1ba26;
    opacity: 1;
    border-radius: 0;
}

.arrow-left {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid blue;
}

#quiz {
    font-family: 'Citroen-bold-italic';
    color: #fff;
}

#quiz {
    text-align: right;

}
   label {
display: inline-block;
cursor: pointer;
position: relative;
padding-right: 25px;
margin-left: 15px;
font-size: 13px;
}
input[type=radio] {
display: none;
}
label:after {
content: "";
display: inline-block;

width: 16px;
height: 16px;

margin-left: 0px;
position: absolute;
right: 0;
bottom: 1px;
background-color: #424242;
border: 2px solid #212121;
}
.radio label:after {
border-radius: 2px;
}
input[type=radio]:checked + label:after {
content: "\2713";
color: #E0E0E0;
font-size: 15px;
text-align: center;
line-height: 18px;
}
     <div class="tabbable tabs-right">
    <ul class="nav nav-tabs">
        <li class="active abas"><a href="#1" data-toggle="tab">1</a></li>
        <li><a href="#2" data-toggle="tab">2</a></li>
        <li><a href="#3" data-toggle="tab">3</a></li>
        <li><a href="#4" data-toggle="tab">4</a></li>
        <li><a href="#5" data-toggle="tab">5</a></li>
        <li><a href="#6" data-toggle="tab">6</a></li>
    </ul>
    <div class="tab-content">
 <div class="tab-pane active" id="1">
   <p>Lorem ipsum dolor sit amet, charetra varius quam sit vulputate.</p>
   <input id="1a" na type="radio"><label for="1a">Lorem ipsum dolor sit </label>
   <input id="1b" type="radio"> <label for="1b">Lorem ipsum dolor sit </label>
   <input id="1c" type="radio"><label for="1c">Lorem ipsum dolor sit </label>

      <button class="pull-right">RESPONDER</button>
 </div>

8
  • Aqui tem vários exemplos de estilização de um radio button, uns com JavaScript outros só com CSS.
    – mgibsonbr
    Commented 6/04/2015 às 1:58
  • 1
    A propósito, você pede por "checkbox", mas a imagem de referência me parece mais com um "toggle button" (pelo que eu entendi, esse "1" amarelo seria a opção escolhida, se o usuário clicasse no "4" por exemplo aí ele ficaria amarelo enquanto o "1" ficaria apagado. É isso?). O que você quer realmente?
    – mgibsonbr
    Commented 6/04/2015 às 2:05
  • 1
    Entendi, o texto grande é o título e os três textos pequenos são as alternativas... É que como havia só um placeholder para o texto, não estava claro o que era o que.
    – mgibsonbr
    Commented 6/04/2015 às 21:13
  • 3
    Esta pergunta está sendo discutida no Meta.
    – mgibsonbr
    Commented 10/04/2015 às 16:11
  • 1
    Olá Hendy. Que bom que resolveu o problema ! Não sei se você acompanhou a discussão linkada acima pelo @mgibsonbr, mas ocorreu aqui algo a ser evitado: você alterou totalmente a pergunta depois que já havia uma resposta postada (e votada). Isso não funciona bem aqui no site, pois a resposta que já existia passou a não funcionar para a nova pergunta. Nesses casos, poste uma pergunta separada (e inclua links para outras, relacionadas, caso necessário). Aqui temos regras e mecanismos um pouco diferentes da maioria dos outros sites (fóruns), mas com o tempo você pega o jeito. Bom aprendizado!
    – bfavaretto
    Commented 13/04/2015 às 21:42

2 Respostas 2

13
+50

Você pode fazer isso de maneira simples usando somente css. O que o código abaixo faz é basicamente reestilizar o label do radio para se parecer com um checkbox, esconder o verdadeiro radio e então substituí-lo usando o pseudo-elemento :before, você pode fazer isso usando uma imagem também.

html, body {
    font-family: Arial, sans-serif;
    line-height: 20px;
}
label {
    display: inline-block;
    cursor: pointer;
    position: relative;
    padding-left: 25px;
    margin-right: 15px;
    font-size: 13px;
}
input[type=radio] {
    display: none;
}
label:before {
    content: "";
    display: inline-block;
 
    width: 16px;
    height: 16px;
 
    margin-right: 10px;
    position: absolute;
    left: 0;
    bottom: 1px;
    background-color: #424242;
    border: 2px solid #212121;
}
.radio label:before {
    border-radius: 2px;
}
input[type=radio]:checked + label:before {
    content: "\2713";
    color: #E0E0E0;
    font-size: 15px;
    text-align: center;
    line-height: 18px;
}
<div class="radio">
    <b>Escolha um número:</b>
    <br />
    <input id="1" type="radio" name="option" value="1" />
    <label for="1">1</label>
    <br />
    <input id="2" type="radio" name="option" value="2" />
    <label for="2">2</label>
    <br />
    <input id="3" type="radio" name="option" value="3" />
    <label for="3">3</label>
    <br />
    <input id="4" type="radio" name="option" value="4" />
    <label for="4">4</label>
    <br />
    <input id="5" type="radio" name="option" value="5" />
    <label for="5">5</label>
</div>

4
  • 3
    +1 Complementando (pois me pareceu que a AP quer algo como um toggle button - embora na pergunta ela peça por checkbox): essa técnica pode ser facilmente adaptada somente estilizando-se o label e esquecendo a parte o :before (ou talvez usando o :before pra criar a "setinha" à esquerda do botão, usando propriedades de borda).
    – mgibsonbr
    Commented 6/04/2015 às 2:02
  • Estou testando esse método e o primeiro input não funciona.. só consigo selecionar do 2 para baixo..@mgibsonbr
    – fronthendy
    Commented 6/04/2015 às 12:55
  • Pode mostrar o código do seu form? Commented 6/04/2015 às 13:02
  • Adicionei o código á pergunta.
    – fronthendy
    Commented 6/04/2015 às 13:14
10

No código que você colocou no op estão faltando os names dos inputs. Sem os names iguais ele não muda a seleção.

html, body {
    font-family: Arial, sans-serif;
    line-height: 20px;
}
label {
    display: inline-block;
    cursor: pointer;
    position: relative;
    padding-left: 25px;
    margin-right: 15px;
    font-size: 13px;
}
input[type=radio] {
    display: none;
}
label:before {
    content: "";
    display: inline-block;
 
    width: 16px;
    height: 16px;
 
    margin-right: 10px;
    position: absolute;
    left: 0;
    bottom: 1px;
    background-color: #424242;
    border: 2px solid #212121;
}
.radio label:before {
    border-radius: 2px;
}
input[type=radio]:checked + label:before {
    content: "\2713";
    color: #E0E0E0;
    font-size: 15px;
    text-align: center;
    line-height: 18px;
}
<div class="tab-pane active" id="1">
   <p>Lorem ipsum dolor sit amet, charetra varius quam sit vulputate.</p>
   <input id="1a" name="ab" type="radio"><label for="1a">Lorem ipsum dolor sit </label>
   <input id="1b" name="ab"type="radio"> <label for="1b">Lorem ipsum dolor sit </label>
   <input id="1c" name="ab" type="radio"><label for="1c">Lorem ipsum dolor sit </label>

      <button class="pull-right">RESPONDER</button>
 </div>

PS: Eu ai postar isso nos comentários, mas precisava ter 50 pontos de reputação, então resolvi postar como resposta mesmo. Qualquer coisa, se não for o caso de uma resposta, apaguem por favor. Aqui, clicando em "executar código" deu certo (e vai até ser útil pra mim) :) ...

2
  • 1
    +10 de reputação para você poder começar a escrever comentários úteis :) Commented 9/04/2015 às 19:35
  • 1
    Valeu! :) É bem difícil encontrar algo que eu saiba pra responder por aqui (novato ainda)... acho que dei sorte nesta. :-)
    – gustavox
    Commented 9/04/2015 às 20:51

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 .