Select payment method -radio buttons

      No Comments on Select payment method -radio buttons

Select payment method:

Select payment method
Select payment method
Select payment method

Select payment method – creating it

Understanding HTML:

<div class="cnt_full"> //container div
  <div class="cnt_min"> //div containing one card option
     <input type="radio" name="card"/> 
                      //input type radio for selection of one card type
     <img src="3.png" alt="Select payment method" class="selected_img"/> 
                      //card image
  </div>
  <div class="cnt_min">
     <input type="radio" name="card"/>
     <img src="2.png" alt="Select payment method"  class="selected_img"/>
  </div>
  <div class="cnt_min">
     <input type="radio" name="card"/>
     <img src="1.png" alt="Select payment method"  class="selected_img"/>
  </div>
</div>

Understanding the style

Style for the container div and div containing a card

.cnt_full
{
   display:block;
   margin:20px 10px;
   width:100%;
}
.cnt_min
{
     display:inline-block;
     width:150px;
     margin:10px;
     height:120px;
     position:relative;
     padding:0 2%;
}

Style for radio button

.cnt_min input[type="radio"]
{
     width:100%;
     height:100%;
     position:absolute;
     top:0;
     left:0;
     opacity:0;  //to make the radio button hidden
}

position:absolute;,width:100%;,height:100%; are used to set the radio button to cover entire area of the div , in which it is contained.

opacity:0; is used to make the radio button hidden without actually affecting it’s functionality.

NOTE:
display:none; is not used to hide the radio button because it makes the radio button ineffective. In other words, it is like there is no radio button present.

.selected_img
{
    pointer-events: none;
    width:100%;height:100%;
}

pointer-events: none; sets no pointer events occur on click of the image.

This style functions on selection of a radio button, or when a radio button is checked.

.cnt_min input[type="radio"]:checked ~ .selected_img selects the .cnt_min div containing the input with type radio and corresponding img with class .selected_img

.cnt_min input[type="radio"]:checked ~ .selected_img
{
  border:solid 1px green;
  box-shadow:0px 1px 4px 0px #ccc;
  border-radius:5px;
}

View on CodePen

See the Pen Select a payment method using radio buttons by scanfcode (@scanfcode) on CodePen.

Leave a Reply

Your email address will not be published. Required fields are marked *