How to create a custom radio button as image?

Image as radio button in css: you can create an image as radio button, need to use property opacity:0 [type='radio'] {opacity: 0;}

When we use then need to use image with plus symbol because it will be work just next property.  You will more understand with below example:

Radio as an image example:

<style>

        .anythingLearn [type='radio'] {

            position: absolute;

            opacity: 0;

            width: 0;

            height: 0;

        }

        .anythingLearn [type='radio']+img {

            cursor: pointer;

            margin: 5px;

        }

        .anythingLearn [type='radio']:checked+img {

            outline: 5px solid #0bf;

        }

    </style>

<div class="anythingLearn">

        <label>

            <input type="radio" name="test" value="small" checked>

            <img src="images/testimg.png" alt="test">

        </label>

        <label>

            <input type="radio" name="test" value="big">

            <img src="images/testimg1.png" alt="test">

        </label>

        <label>

            <input type="radio" name="test" value="big">

            <img src="images/testlogo.png" alt="test">

        </label>

    </div>

Your result will be a screenshot below:

If you want use text as image then need to use this below code:

[type=radio] { 

    position: absolute;

    opacity: 0;

    width: 0;

    height: 0;

  }

  

  [type=radio] + span {

    cursor: pointer;

  }

  

  [type=radio]:checked + span {

    outline: 5px solid #0bf;

  }

<label>

              <input type="radio" name="test" value="small" checked>

              <span>Sheo</span>

            </label>

            

            <label>

              <input type="radio" name="test" value="big">

              <span>Sagar</span>

            </label>

 

 .....................................................................

 

If you want to custom radio button with some text data as below screenshot:

 

.radioSecss label{ display: block; position: relative; margin-bottom: 4px;}

.radioSecss [type=radio]{

position: absolute;

left: 10px;

    top: 20px;

}

  

  .radioSecss [type=radio] + div.radiSe {

    cursor: pointer;

    outline: 2px solid #eee;

    padding: 10px 10px 10px 30px;

  }

  

 .radioSecss [type=radio]:checked + div.radiSe {

    outline: 2px solid #0bf;

    padding: 10px 10px 10px 30px;

  }

.radioSecss .proNameText{font-size: 20px;

    font-weight: 700; color: #0bf;}

 .radioSecss .proSaveText{font-size: 20px;

    font-weight: 700; color: #000; float: right;}   

.radioSecss .proPriceText strong{font-size: 20px;

    font-weight: 700; color: #69ad7c;}

.radioSecss .proPriceText span{font-size: 16px; font-family: Arial, Helvetica, sans-serif; color: #000;}

 

<div class="radioSecss">

                        <label>

                            <input type="radio" name="test" value="small" checked>

                            <div class="radiSe">

                                <div class="proNameText">One Product Name</div>

                                <div class="proPriceText"><strong>£159</strong> <span>each + selected products</span></div>

                            </div>

                          </label>

                          <label>

                            <input type="radio" name="test" value="big">

                            <div class="radiSe">

                                <div class="proSaveText">Save 59%</div>

                                <div class="proNameText">Two Product Name</div>

                                <div class="proPriceText"><strong>£121</strong> <span>each + selected products</span></div>

                            </div>

                          </label>

                      </div>