Skip to main content
formatação
Fonte Link
LeAndrade
  • 9mil
  • 11
  • 29
  • 52

input:checked + li {
    border: solid rgba(37,205,61,1.00);
}

input:checked + #field_1_5 {
    border: solid rgba(37,205,61,1.00);
}

input:checked + li .list {
    border: solid rgba(37,205,61,1.00);
}

input:checked + .list {
    border: solid rgba(37,205,61,1.00);
}

input:checked + li {
    border: solid rgba(37,205,61,1.00);
}

input:checked + #field_1_5 {
    border: solid rgba(37,205,61,1.00);
}

input:checked + li .list {
    border: solid rgba(37,205,61,1.00);
}

input:checked + .list {
    border: solid rgba(37,205,61,1.00);
}
}
.list img {
    border: solid rgba(223, 223, 223, 0.99);
}
.list {
    list-style-type: none;
    margin-left: 150px;
    padding-left: 0px;
    display: inline-block;
    border: solid rgba(223, 223, 223, 0.99);
    text-align: center;
    width: 305px;
    background-color: rgba(237, 237, 237, 1.00);
}
ul {
 
  list-style-type: none;
 
}
#field_1_5 {
    display: none;
  /* visibility: hidden works too */
}
<html>

<head>
</head>
<body>
<ul> 
  
 <li class="list">
                                                        <label class="" for="field_1_5">
                                                            <span class="">
        <img src="https://image.freepik.com/free-vector/vector-illustration-of-a-mountain-landscape_1441-77.jpg" alt="imagem montanha" width="300" title="montanha">
        </span>
                                                            <br>
                                                            <input type="checkbox" id="field_1_5" name="check1[]" value="Montras Digitais">
                                                            <span class="">imagem montanha</span>
                                                        </label>
                                                    </li>
                                                    </ul>
</body>
</html>

input:checked + li {
    border: solid rgba(37,205,61,1.00);
}

input:checked + #field_1_5 {
    border: solid rgba(37,205,61,1.00);
}

input:checked + li .list {
    border: solid rgba(37,205,61,1.00);
}

input:checked + .list {
    border: solid rgba(37,205,61,1.00);
}

}
.list img {
    border: solid rgba(223,223,223,0.99);
}
.list {
    list-style-type: none;
    margin-left: 150px;
    padding-left: 0px;
    display: inline-block;
    border: solid rgba(223,223,223,0.99);
    text-align: center;
    width: 305px;
    background-color: rgba(237,237,237,1.00);
}
ul {
 
list-style-type: none;
 
}
#field_1_5 {
    display: none; /* visibility: hidden works too */
}
<html>

<head>
</head>
<body>
<ul>  
 <li class="list">
                                                        <label class="" for="field_1_5">
                                                            <span class="">
        <img src="https://image.freepik.com/free-vector/vector-illustration-of-a-mountain-landscape_1441-77.jpg" alt="imagem montanha" width="300" title="montanha">
        </span>
                                                            <br>
                                                            <input type="checkbox" id="field_1_5" name="check1[]" value="Montras Digitais">
                                                            <span class="">imagem montanha</span>
                                                        </label>
                                                    </li>
                                                    </ul>
</body>
</html>
input:checked + li {
    border: solid rgba(37,205,61,1.00);
}

input:checked + #field_1_5 {
    border: solid rgba(37,205,61,1.00);
}

input:checked + li .list {
    border: solid rgba(37,205,61,1.00);
}

input:checked + .list {
    border: solid rgba(37,205,61,1.00);
}
}
.list img {
  border: solid rgba(223, 223, 223, 0.99);
}
.list {
  list-style-type: none;
  margin-left: 150px;
  padding-left: 0px;
  display: inline-block;
  border: solid rgba(223, 223, 223, 0.99);
  text-align: center;
  width: 305px;
  background-color: rgba(237, 237, 237, 1.00);
}
ul {
  list-style-type: none;
}
#field_1_5 {
  display: none;
  /* visibility: hidden works too */
}
<ul> 
  <li class="list">
    <label class="" for="field_1_5">
      <span class="">
        <img src="https://image.freepik.com/free-vector/vector-illustration-of-a-mountain-landscape_1441-77.jpg" alt="imagem montanha" width="300" title="montanha">
      </span>
      <br>
      <input type="checkbox" id="field_1_5" name="check1[]" value="Montras Digitais">
      <span class="">imagem montanha</span>
    </label>
  </li>
</ul>
removeu 77 caracteres do conteúdo
Fonte Link

O que eu quero é que tanto a border de fora como a da imagem fiquem verdes ao clicar na imagem (checkbox) e nao esta a funcionar deixo aqui por de baixa o meu html e css .   

input { visibility: hidden; }
.list label span {
    color: #000000;
}
.list img {
    border: solid rgba(223,223,223,0.99);
}
.list {
    list-style-type: none;
    margin-left: 150px;
    padding-left: 0px;
    display: inline-block;
    border: solid rgba(223,223,223,0.99);
    text-align: center;
    width: 305px;
    background-color: rgba(237,237,237,1.00);
}
ul {

list-style-type: none;

}
#field_1_5 {
    display: none; /* visibility: hidden works too */
}
<html>

<head>
</head>
<body>
<ul>  
<li class="list">
                                                        <label class="" for="field_1_5">
                                                            <span class="">
        <img src="https://image.freepik.com/free-vector/vector-illustration-of-a-mountain-landscape_1441-77.jpg" alt="imagem montanha" width="300" title="montanha">
        </span>
                                                            <br>
                                                            <input type="checkbox" id="field_1_5" name="check1[]" value="Montras Digitais">
                                                            <span class="">imagem montanha</span>
                                                        </label>
                                                    </li>
                                                    </ul>
</body>
</html>

O que eu quero é que tanto a border de fora como a da imagem fiquem verdes ao clicar na imagem (checkbox) e nao esta a funcionar deixo aqui por de baixa o meu html e css .  

input { visibility: hidden; }
.list label span {
    color: #000000;
}
.list img {
    border: solid rgba(223,223,223,0.99);
}
.list {
    list-style-type: none;
    margin-left: 150px;
    padding-left: 0px;
    display: inline-block;
    border: solid rgba(223,223,223,0.99);
    text-align: center;
    width: 305px;
    background-color: rgba(237,237,237,1.00);
}
ul {

list-style-type: none;

}
#field_1_5 {
    display: none; /* visibility: hidden works too */
}
<html>

<head>
</head>
<body>
<ul>  
<li class="list">
                                                        <label class="" for="field_1_5">
                                                            <span class="">
        <img src="https://image.freepik.com/free-vector/vector-illustration-of-a-mountain-landscape_1441-77.jpg" alt="imagem montanha" width="300" title="montanha">
        </span>
                                                            <br>
                                                            <input type="checkbox" id="field_1_5" name="check1[]" value="Montras Digitais">
                                                            <span class="">imagem montanha</span>
                                                        </label>
                                                    </li>
                                                    </ul>
</body>
</html>

O que eu quero é que tanto a border de fora como a da imagem fiquem verdes ao clicar na imagem (checkbox) e nao esta a funcionar deixo aqui por de baixa o meu html e css . 

}
.list img {
    border: solid rgba(223,223,223,0.99);
}
.list {
    list-style-type: none;
    margin-left: 150px;
    padding-left: 0px;
    display: inline-block;
    border: solid rgba(223,223,223,0.99);
    text-align: center;
    width: 305px;
    background-color: rgba(237,237,237,1.00);
}
ul {

list-style-type: none;

}
#field_1_5 {
    display: none; /* visibility: hidden works too */
}
<html>

<head>
</head>
<body>
<ul>  
<li class="list">
                                                        <label class="" for="field_1_5">
                                                            <span class="">
        <img src="https://image.freepik.com/free-vector/vector-illustration-of-a-mountain-landscape_1441-77.jpg" alt="imagem montanha" width="300" title="montanha">
        </span>
                                                            <br>
                                                            <input type="checkbox" id="field_1_5" name="check1[]" value="Montras Digitais">
                                                            <span class="">imagem montanha</span>
                                                        </label>
                                                    </li>
                                                    </ul>
</body>
</html>
Fonte Link

input:checked nao muda border como solicitado em css

Estou a tentar mudar a border de uma imagem quando o input de uma checkbox esta selecionado, ou o meu css nao deixa ou algo esta a bloquear. Seguindo a logica eu testei estas linhas de css e nenhuma deu para por o border a mudar .

input:checked + li {
    border: solid rgba(37,205,61,1.00);
}

input:checked + #field_1_5 {
    border: solid rgba(37,205,61,1.00);
}

input:checked + li .list {
    border: solid rgba(37,205,61,1.00);
}

input:checked + .list {
    border: solid rgba(37,205,61,1.00);
}

O que eu quero é que tanto a border de fora como a da imagem fiquem verdes ao clicar na imagem (checkbox) e nao esta a funcionar deixo aqui por de baixa o meu html e css .

input { visibility: hidden; }
.list label span {
    color: #000000;
}
.list img {
    border: solid rgba(223,223,223,0.99);
}
.list {
    list-style-type: none;
    margin-left: 150px;
    padding-left: 0px;
    display: inline-block;
    border: solid rgba(223,223,223,0.99);
    text-align: center;
    width: 305px;
    background-color: rgba(237,237,237,1.00);
}
ul {

list-style-type: none;

}
#field_1_5 {
    display: none; /* visibility: hidden works too */
}
<html>

<head>
</head>
<body>
<ul>  
<li class="list">
                                                        <label class="" for="field_1_5">
                                                            <span class="">
        <img src="https://image.freepik.com/free-vector/vector-illustration-of-a-mountain-landscape_1441-77.jpg" alt="imagem montanha" width="300" title="montanha">
        </span>
                                                            <br>
                                                            <input type="checkbox" id="field_1_5" name="check1[]" value="Montras Digitais">
                                                            <span class="">imagem montanha</span>
                                                        </label>
                                                    </li>
                                                    </ul>
</body>
</html>