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'] {opacity0;}

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'] {
            positionabsolute;
            opacity0;
            width0;
            height0;
        }
        .anythingLearn [type='radio']+img {
            cursorpointer;
            margin5px;
        }
        .anythingLearn [type='radio']:checked+img {
            outline5px 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] { 
    positionabsolute;
    opacity0;
    width0;
    height0;
  }
  
  [type=radio] + span {
    cursorpointer;
  }
  
  [type=radio]:checked + span {
    outline5px 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 labeldisplayblockpositionrelativemargin-bottom4px;}

.radioSecss [type=radio]{
positionabsolute;
left10px;
    top20px;
}
  
  .radioSecss [type=radio] + div.radiSe {
    cursorpointer;
    outline2px solid #eee;
    padding10px 10px 10px 30px;
  }
  
 .radioSecss [type=radio]:checked + div.radiSe {
    outline2px solid #0bf;
    padding10px 10px 10px 30px;
  }
.radioSecss .proNameText{font-size20px;
    font-weight700color#0bf;}
 .radioSecss .proSaveText{font-size20px;
    font-weight700color#000floatright;}   
.radioSecss .proPriceText strong{font-size20px;
    font-weight700color#69ad7c;}
.radioSecss .proPriceText span{font-size16pxfont-familyArialHelveticasans-serifcolor#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>

No comments:

Note: Only a member of this blog may post a comment.

Copyright Reserved to Anything Learn. Powered by Blogger.