Let’s say that you have a specific requirement to convert a simple drop-down into drop-down with color in the background.

Step 1:  Add the “drop-down” class in the mentioned file “app/design/frontend/Magemonkey/luma_child/Magento_ConfigurableProduct/templates/product/view/type/options/configurable.phtml”

<div class="field configurable required color">
                <label class="label" for="attribute<?= /* @escapeNotVerified */ $_attribute->getAttributeId() ?>">
                    <span><?= $block->escapeHtml($_attribute->getProductAttribute()->getStoreLabel()) ?></span>
                </label>
                <div class="control drop-down">
                    <select name="super_attribute[<?= /* @escapeNotVerified */ $_attribute->getAttributeId() ?>]"
                            data-selector="super_attribute[<?= /* @escapeNotVerified */ $_attribute->getAttributeId() ?>]"
                            data-validate="{required:true}"
                            id="attribute<?= /* @escapeNotVerified */ $_attribute->getAttributeId() ?>"
                            class="super-attribute-select">
                        <option value=""><?= /* @escapeNotVerified */ __('Choose an Option...') ?></option>
                    </select>
                </div>
            </div>

Step 2:  Add the below js in the mentioned file
“app/design/frontend/Magemonkey/luma_child/Magento_ConfigurableProduct/templates/product/view/type/options/configurable.phtml”

<script type="text/javascript">
require(["jquery"], function(jQuery) {
    document.onreadystatechange = function(){
        if(document.readyState=='loaded' || document.readyState=='complete') {
            setTimeout(function(){ 
                jQuery('.drop-down').append('<div class="button"></div>');  
                jQuery('.drop-down').append('<ul class="select-list"></ul>');
                jQuery('.drop-down select option').each(function() {
                    var bg = jQuery(this).val();
                    var colortext1 = jQuery(this).text();
                    var colortext1_arr = colortext1.split(' +');
                    
                    var colortext = colortext1_arr[0].replace(/s/g, '');
                    
                    jQuery('.select-list').append('<li class="clsAnchor"><span class="color-icon" style="background-color:' + colortext + '"></span><span value="' + bg + '" class="' + jQuery(this).attr('class') + '" >' + jQuery(this).text() + '</span></li>');
                });
                jQuery('.drop-down .button').html('<span class="color-icon" style="background-color:' + jQuery('.drop-down select').find(':selected').val() + '"></span><span class="color-text">' + jQuery('.drop-down select').find(':selected').text() + '</span>' + '<a href="javascript:void(0);" class="select-list-link">Arrow</a>');              
                jQuery('.drop-down ul li').each(function() {
                    if (jQuery(this).find('span').text() == jQuery('.drop-down select').find(':selected').text()) {
                        jQuery(this).addClass('active');
                    }
                });
                jQuery('.drop-down .select-list span').on('click', function() {
                    var dd_text = jQuery(this).text();
                    var dd_img1 = jQuery(this).css('background-color');
                    var dd_img = '#'+dd_img1.match(/d+/g).map(x=>(+x).toString(16).padStart(2,0)).join('');
                    var dd_val = jQuery(this).attr('value');
                    //alert(dd_val);
                    var dd_color_arr = dd_text.split(' +');
                    //var dd_color = dd_color_arr[0];
                    var dd_color = dd_color_arr[0].replace(/s/g, '');

                    
                    jQuery('.super-attribute-select option[value='+ dd_val +']').prop('selected',true).trigger('change');

                    
                    jQuery('.drop-down .button').html('<span class="color-icon" style="background-color:' + dd_color + '"></span><span class="color-text">' + dd_text + '</span>' + '<a href="javascript:void(0);" class="select-list-link">Arrow</a>');
                    jQuery('.drop-down .select-list span').parent().removeClass('active');
                    jQuery(this).parent().addClass('active');
                    jQuery('.drop-down select[name=options]').val( dd_text );
                    jQuery('.drop-down .select-list li').slideUp();                
                });
                
                jQuery('.drop-down .button').on('click', function() {
                    jQuery('.drop-down ul li').slideToggle();
                });

            }, 3000);
        }
    }
}); 
</script>

This will convert the drop-down in HTML structure and set the color as a background.