0

O usuário acessará uma tela em HTML, onde terá algumas perguntas e cada pergunta terá 3 ou 4 opções de respostas no formato de botão.

Quando ele clicar no botão, o botão muda de cor. De azul, fica vermelho. E assim por diante, no final a tela estará toda marcada com as opções do cliente.

EXEMPLO A PRIMEIRA TELA

inserir a descrição da imagem aqui

EXEMPLO COM O MOUSE PASSANDO POR CIMA DO BOTÃO

inserir a descrição da imagem aqui

EXEMPLO DEPOIS DE CLICADO, ELE DEVERÁ FICAR NA COR VERMELHA, OU SEJA, MOSTRANDO VISUALMENTE QUAL FOI A OPÇÃO SELECIONADA DO CLIENTE.inserir a descrição da imagem aqui

4
  • 1
    Qual é sua dúvida ? Commented 14/06/2017 às 19:44
  • Tem algum código sendo trabalhado para compartilhar? Commented 14/06/2017 às 19:45
  • Não, a minha dúvida é, como deixo o botão marcado com a cor vermelha depois quele foi clicado? Sei que no botão normal, onde te link eu poderia fazer assim 'a:link........ COR AZUL, a:visited...COR VERMELHO, a:hover..... COR VERMELHO, a:active.... COR VERMELHO' mas esse botão não é para levar a lugar nenhum, é apenas para ficar selecionado nessa cor. Commented 14/06/2017 às 19:50
  • Compartilha seu HTML. O ideal é ver como você criou os botões pra poder dizer como mudar. Commented 14/06/2017 às 19:52

2 Respostas 2

1

#ck-button {
    margin:0px;
    background-color:#EFEFEF;
    border-radius:4px;
    border:1px solid #D0D0D0;
  
    overflow:auto;
    float:left;
}

#ck-button label {
    float:left;
    width:4.0em;
}

#ck-button label span {
    text-align:center;
    padding:3px 0px;
    display:block;
    border-radius:4px;
}

#ck-button label input {
    position:absolute;
    top:-20px;
    
}
input:checked +span{
    background-color:#911;
    color:#fff;
}
 #ck-button label:hover   {
    background-color:lightgray;
}
#ck-button label:hover #o1 + span {
    background-color:blue;
}
#ck-button label:hover #o2 + span {
    background-color:orange;
}
#ck-button label:hover #o3 + span {
    background-color:green;
}
      <div id="ck-button"><label><input type="checkbox" name="sta_choice" id=all value="All" checked><span>All</span></label></div>
      <div id="ck-button"><label><input type="checkbox" name="sta_choice"  value="All" ><span>All2</span></label></div>
      <div id="ck-button"><label><input type="checkbox" name="sta_choice" id="o1" value="Cold" onclick=handleClick1(this.val);><span class="o1">Cold</span></label></div>                               
      <div id="ck-button"><label><input type="checkbox" name="sta_choice" id="o2" value="Warm" onclick="handleClick1(this.val);"><span>Warm</span></label></div>                                
      <div id="ck-button"><label><input type="checkbox" name="sta_choice" id="o3" value="Active" onclick="handleClick1(this.val);"><span>Active</span></label></div>

Acredito que é bem isso que busca.

2
  • Perfeito Gustavo, exatamente isso!!! Commented 14/06/2017 às 20:16
  • É exatamente isso, mas percebi que ele não expande quando coloco textos grandes, tipo esse texto: "Resposta parcial ao serotoninérgico"ele foi aumentando a caixa pra baixo. Tem alguma formar de definimos a largura individualmente por input (Checkbox)? Commented 14/06/2017 às 21:23
0

Tentei fazer o mais simples possível. Na próxima vez, tenta postar o código no qual você está trabalhando, como disse o Leon Freire, pra agilizar o nosso lado :)

Cá está:

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* Faça como quiser, calango */
label {
  width: 50%;
  padding: 0 4px;
  margin-bottom: 8px;
  float: left;
  text-align: center;
  cursor: pointer;
}

/* Esconde a caixa de seleção */
/* (Creio que opacity:0 e display:none também funcionem) */
label input[type=checkbox] {
  position: absolute;
  clip: rect(0,0,0,0);
  /* Sim, tive que ver como é no Bootstrap :p */
}

/* Padrão dos itens */
label span {
  display: block;
  background-color: #fff;
  color: #1b4486;
  padding: 8px;
  font-size: 20px;
  border: 2px solid #1b4486;
}

/* Quando mouse passa por cima */
label:hover span {
  background-color: #639dff;
  color: #1b4486;
  box-shadow: 1px 1px 5px rgba(255,255,255,.4) inset;
}

/* Quando item selecionado */
label input[type=checkbox]:checked + span {
  background-color: #1b4486;
  border-color: #ffcc0f;
  color: #fff;
}

/* Quando mouse passa por cima de item selecionado */
label:hover input[type=checkbox]:checked + span {
  background-color: #d44950;
  border-color: #ffcc0f;
}
<label>
  <input type="checkbox">
  <span>Opção 1</span>
</label>
<label>
  <input type="checkbox">
  <span>Opção 2</span>
</label>
<label>
  <input type="checkbox">
  <span>Opção 3</span>
</label>
<label>
  <input type="checkbox">
  <span>Opção 4</span>
</label>
<label>
  <input type="checkbox">
  <span>Opção 5</span>
</label>
<label>
  <input type="checkbox">
  <span>Opção 6</span>
</label>

1
  • PERFEITO, AGORA SIM!!! Valeu Vitor Adriano Commented 20/06/2017 às 19:02

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 .