0

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.

0

Override shipping-method-item.html in your custom theme

From:

vendor/magento/module-checkout/view/frontend/web/template/shipping-address/shipping-method-item.html

To:

app/design/frontend/{Vendor}/{theme}/Magento_Checkout/web/template/shipping-address/shipping-method-item.html

Here you can add <label> after <input type="radio"> for custom styling radio button

...
...
<td class="col col-method">
    <input type="radio"
           class="radio"
           ifnot="method.error_message"
           ko-checked="element.isSelected"
           ko-value="method.carrier_code + '_' + method.method_code"
           attr="'aria-labelledby': 'label_method_' + method.method_code + '_' + method.carrier_code + ' ' + 'label_carrier_' + method.method_code + '_' + method.carrier_code,
                'checked': element.rates().length == 1 || element.isSelected" />
    <div class="label"></div>
</td>
...
...

Run this commands after override html file in your theme

php bin/magento setup:static-content:deploy
php bin/magento cache:flush

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.