How to add tick to a custom radio using css? - html

Question

I have a simple custom radio and I want to add a ticky when clicked,
I tried below code :
p.payment_module a {
display: block;
border: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0px;
line-height: 23px;
color: #000;
position: relative;
border: none !important;
white-space: nowrap;
text-transform: initial;
font-family: "futura-pt, sans-serif";
}
p.payment_module a span {
color: #777;
font-weight: normal !important;
}
p.payment_module a:after {
content: '';
background: #fff;
border: 1px solid #000;
display: inline-block;
vertical-align: text-top;
width: 25px;
height: 25px;
padding: 0px;
left: -16px !important;
top: 9px !important;
position: absolute;
display: inline-block;
margin-right: 30px;
text-align: center;
border-radius: 50%;
}
p.payment_module a:before{
content: '✔';
box-shadow: inset 0px 0px 0px 4px #fff;
}
<p class="payment_module">
<a href="http://localhost:8080/index.php?fc=module&module=bankwire&controller=payment&id_lang=1" title="Zapłać przelewem" class="button button-block payment-button">
<img src="/modules/bankwire/bankwire.jpg" alt="Zapłać przelewem" width="86" height="49">
Zapłać przelewem <span>(czas przetwarzania zamówienia będzie dłuższy)</span>
</a>
</p>
My custom radio does not display the tick when I click , What am I missing in my code?
Any help will be appreciated

Answer 1

The problem is that <a> css, Please check below code:
input[type="radio"] {
display: none;
}
input[type="radio"] + label {
display: inline-block;
cursor: pointer;
}
input[type="radio"] + label:before {
content: "";
display: inline-block;
position: relative;
border: 1px solid #000;
border-radius:50px;
width: 60px;
height: 60px;
margin:0;
}
input[type="radio"]:checked + label:before {
content: "✔";
font-family: 'lucida grande';
font-size: 45px;
line-height: 60px;
text-align: center;
}
<p class="payment_module">
<input id="session1" name="radio-group" type="radio" />
<label for="session1">
<img src="https://picsum.photos/86/49/?random" alt="Zapłać przelewem" width="86" height="49">
Zapłać przelewem <span>(czas przetwarzania zamówienia będzie dłuższy)</span>
</label>
</p>