I am trying to add a custom style to radio buttons in the shipping method on the magento 2 checkout.
Now normally I would do something like this…
[type="radio"]:checked,
[type="radio"]:not(:checked) {
position: absolute;
left: -9999px;
}
[type="radio"]:checked + label,
[type="radio"]:not(:checked) + label {
position: relative;
padding-left: 28px;
cursor: pointer;
line-height: 20px;
display: inline-block;
color: #666;
}
[type="radio"]:checked + label:before,
[type="radio"]:not(:checked) + label:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 18px;
height: 18px;
border: 1px solid #ddd;
border-radius: 100%;
background: #fff;
}
[type="radio"]:checked + label:after,
[type="radio"]:not(:checked) + label:after {
content: '';
width: 12px;
height: 12px;
background: @color-coral;
position: absolute;
top: 4px;
left: 4px;
border-radius: 100%;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
[type="radio"]:not(:checked) + label:after {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
[type="radio"]:checked + label:after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
… but kindly Magento puts this input into a table with no label.
How would suggest I style the radio button?
I am happy to make changes to the template files is necessary but I don't really understand where to look or what to change.
Any suggestions would be met with much gratitude.
Best Answer
Override
shipping-method-item.html
in your custom themeFrom:
To:
Here you can add
<label>
after<input type="radio">
for custom styling radio buttonRun this commands after override html file in your theme