2

Estoy haciendo unos inputs radio con imagen, pero cuando se hace check me gustaría ponerle un icono (imagen) como que está seleccionado esa opción. No se muy bien porque el before no se muestra, pero con inspeccionar elemento, si que quita o pone el before.

/* HIDE RADIO */
.radioCat input[type=radio] { 
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  /* IMAGE STYLES */
.radioCat input[type=radio] + img {
    cursor: pointer;
}
  
.radioCat img {
    width: 20%;
}
.radioCat input[type=radio]:checked + img:before {
    width: 20px;
    height: 20px;
    bottom: 0px;
    position: absolute;
    right: 245px;
    background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/b/b0/Light_green_check.svg/1200px-Light_green_check.svg.png) no-repeat;
    content: "";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>


<div class="radioCat">
    <label style="position: relative;">
        <input type="radio" name="test" value="{{ $ico->slug }}" checked>
        <img src="https://www.pequeocio.com/wp-content/uploads/2020/04/costillas-cerdo-horno.jpg" class="radioCatImg">
    </label>
    
    <label style="position: relative;">
        <input type="radio" name="test" value="{{ $ico->slug }}">
        <img src="https://www.pequeocio.com/wp-content/uploads/2020/04/costillas-cerdo-horno.jpg" class="radioCatImg">
    </label>
</div>

0

1 respuesta 1

2

Los selectores ::before y ::after, según la documentación:

Los pseudoelementos generados por ::before y ::after son contenidos por la caja de formato del elemento, y por lo tanto, no aplica a elementos de reemplazo como los elementos <img>, o <br>.

Solución:

Podrías agregar, por ejemplo, un <picture> (o cualquier otro elemento) que contenga las imagenes

Ejemplo:

/* HIDE RADIO */
.radioCat input[type=radio] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
/* IMAGE STYLES */
.radioCat img {
  cursor: pointer;
  width: 200px;
  height: 200px;
}
.radioCat picture {
  position: relative;
  display: inline-block;
}
.radioCat input:checked+picture::before {
  content: "";
  position: absolute;
  width: 50px;
  height: 50px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/b/b0/Light_green_check.svg/1200px-Light_green_check.svg.png') no-repeat;
  background-size: contain;
}
<div class="radioCat">
  <label>
    <input type="radio" name="test" value="1" checked/>
    <picture>
    <img src="https://www.pequeocio.com/wp-content/uploads/2020/04/costillas-cerdo-horno.jpg" class="radioCatImg"/>
    </picture>
  </label>

  <label>
    <input type="radio" name="test" value="2"/>
    <picture>
      <img src="https://www.pequeocio.com/wp-content/uploads/2020/04/costillas-cerdo-horno.jpg" class="radioCatImg"/>
    </picture>
  </label>
</div>

1
  • Funciona estupendo @Marcos muchisimas gracias!!!!
    – Miguel
    el 4 abr. 2022 a las 19:56

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.