Home / Questions / 526030
Accepted
Miguel
Asked: 2022-09-05 10:46:12 +0800 CST 2022-09-05 10:46:12 +0800 CST

Image for input type radio

  • 772

I am making some radio inputs with an image, but when it is checked I would like to put an icon (image) as if that option is selected. I don't know very well why the before is not shown, but with inspect element, it does remove or put the 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>

html

1 Answers

  1. Best Answer

    ::beforeThe and selectors ::after, according to the documentation :

    The pseudo-elements generated by ::beforeand ::afterare contained by the element's formatting box, and therefore do not apply to replacement elements like the <img>, or elements <br>.

    Solution:

    You could add, for example, a <picture>( or any other element ) that contains the images

    Example :

    /* 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>

    • 2