I am using magento 2.1.7. I want to add one class in country select box on checkout page shipping address.

If anyone knows please help to add class.

  • Thanks for the answer i am also finding a better solution for this i try to add from xml but i will not add a aditional class through xml can any one let me know that why we can not add the classes ussing checkout_index_index.xml file ? Jan 9, 2020 at 8:59

2 Answers 2


You can create plugin after Attribute merge method. Then you can modify checkout fields and add class to wrapper of country select box.

In your module create MODULE/NAME/etc/di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../vendor/magento/framework/ObjectManager/etc/config.xsd"> 
    <type name="\Magento\Checkout\Block\Checkout\AttributeMerger">
        <plugin name="customAttributeMerger" type="\MODULE\NAME\Model\Plugin\AttributeMergerPlugin"/>

Then in \MODULE\NAME\Model\Plugin\AttributeMergerPlugin.php


namespace MODULE\NAME\Model\Plugin;

class AttributeMergerPlugin
    public function afterMerge(\Magento\Checkout\Block\Checkout\AttributeMerger $subject, $result)
        if (array_key_exists('country_id', $result)) {
            $result['country_id']['additionalClasses'] = 'your_custom_class';

        return $result;

For safety clear cache and you should see this class in div wrapper of country select.

Then you can use .your_custom_class select in css/less or $('.your_custom_class').find('select'); in jQuery. Remember that JS script you have to execute when fields are generated

  • can you call custom attribute? $customAttributeCode = 'test'; 'dataScope' => 'shippingAddress.custom_attributes' . '.' . $customAttributeCode, in my case 'test' Nov 4, 2019 at 15:23
  • hm, here is not adding custom attribute. It is only custom class for existing attirubte Nov 5, 2019 at 9:31

override magento/module-ui/view/frontend/web/templates/form/element/select.html into your theme in VENDOR/THEME_NAME//Magento_Ui/templates/form/element/select.html

<select class="select your_class" data-bind="
    attr: {
        name: inputName,
        id: uid,
        disabled: disabled,
        'aria-describedby': getDescriptionId(),
        'aria-required': required,
        'aria-invalid': error() ? true : 'false',
        placeholder: placeholder
    hasFocus: focused,
    optgroup: options,
    value: value,
    optionsCaption: caption,
    optionsValue: 'value',
    optionsText: 'label',
    optionsAfterRender: function(option, item) {
        if (item && item.disabled) {
            ko.applyBindingsToNode(option, {attr: {disabled: true}}, item);

Remove var/view_preprocessed

php bin/magento setup:static-content:deploy

php bin/magento cache:clean

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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