Skip to main content
removeu 44 caracteres do conteúdo
Fonte Link
gustavox
  • 4mil
  • 10
  • 51
  • 98

Não sei se isso resolve o seu problema, mas noNo 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) :) ...

Não sei se isso resolve o seu problema, mas 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) :) ...

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) :) ...

Possível solução do problema.; adicionou 31 caracteres ao conteúdo
Fonte Link
gustavox
  • 4mil
  • 10
  • 51
  • 98

Não sei se isso resolve o seu problema, mas 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) :) ...

Não sei se isso resolve o seu problema, mas 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.

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

Não sei se isso resolve o seu problema, mas 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) :) ...

Fonte Link
gustavox
  • 4mil
  • 10
  • 51
  • 98

Não sei se isso resolve o seu problema, mas 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.

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