Magento 2 : add custom class on checkout page shipping address field

Question

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.

Answer 1

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"/>
    </type>
</config>

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

<?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

Answer 2

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