0

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 .

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

3
  • O primeiro CSS não serve pra nada? Por que ele não faz parte do segundo código?
    – Sam
    Commented 27/12/2018 às 2:02
  • 1
    Com input:checked + li você está selecionando o elemento <li> adjacente ao input:checked, mas no seu caso o elemento <li> é pai do input. No CSS, atualmente, não temos como selecionar elementos pai a partir do filho.
    – Woss
    Commented 27/12/2018 às 10:16
  • então quer dizer que não tenho como por isto a funcionar ??
    – joao dias
    Commented 27/12/2018 às 10:35

1 Resposta 1

7

Você está utilizando os seletores CSS de maneira indevida de acordo com a sua estrutura HTML.

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

Isso selecionará o elemento <li> que é adjacente posterior ao elemento <input> que está selecionado. Na sua estrutura HTML, o elemento <li> é pai do campo e, portanto, jamais funcionará. No CSS, atualmente, não há como selecionar o elemento pai a partir do elemento filho.

O que você pode fazer é aproveitar o funcionamento do seletor de adjacência do CSS e alterar a estrutura do seu HTML deixando a imagem adjacente ao campo.

.option {
  margin: 10px;
  float: left;
}

.option__input {
  display: none;
}

.option__image {
  padding: 3px;
  border: 1px solid lightgray;
  opacity: 0.5;
  cursor: pointer;
  transition: all .2s;
}

.option__image:hover {
  border-color: blue;
  opacity: 1.0;
}

.option__input:checked + .option__image {
  border-color: green;
  opacity: 1.0;
}
<div class="option">
  <label>
    <input type="checkbox" name="field[]" value="1" class="option__input">
    <img src="https://via.placeholder.com/150" class="option__image">
  </label>
</div>

<div class="option">
  <label>
    <input type="checkbox" name="field[]" value="1" class="option__input">
    <img src="https://via.placeholder.com/150" class="option__image">
  </label>
</div>

<div class="option">
  <label>
    <input type="checkbox" name="field[]" value="1" class="option__input">
    <img src="https://via.placeholder.com/150" class="option__image">
  </label>
</div>

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 .