I am trying to change the Shipping methods display from radio buttons to dropdowns by modifying and overwriting the woocommerce/cart/cart-shipping.php file. It works fine in Cart Page but in Checkout Page the label text is outside of option tag.

My modified shipping method:

<select id="shipping_method" class="woocommerce-shipping-methods">
    <?php foreach ( $available_methods as $method ) : ?>
        <?php
        if ( 1 < count( $available_methods ) ) {
            printf( '<option name="shipping_method[%1$d]" data-index="%1$d" id="shipping_method_%1$d_%2$s" value="%3$s" class="shipping_method" %4$s />%6$s</option>', $index, esc_attr( sanitize_title( $method->id ) ), esc_attr( $method->id ), checked( $method->id, $chosen_method, false ), esc_attr( sanitize_title( $method->id ) ), wc_cart_totals_shipping_method_label( $method ) ); // WPCS: XSS ok.
        } else {
            printf( '<input type="hidden" name="shipping_method[%1$d]" data-index="%1$d" id="shipping_method_%1$d_%2$s" value="%3$s" class="shipping_method" />', $index, esc_attr( sanitize_title( $method->id ) ), esc_attr( $method->id ) ); // WPCS: XSS ok.
        }
        // printf( '<label for="shipping_method_%1$s_%2$s">%3$s</label>', $index, esc_attr( sanitize_title( $method->id ) ), wc_cart_totals_shipping_method_label( $method ) ); // WPCS: XSS ok.
        do_action( 'woocommerce_after_shipping_rate', $method, $index );
        ?>
    <?php endforeach; ?>
</select>

Cart Page Output:

Checkout Page Output:

I am hoping that someone could look into my issue and point me in the right direction. Thank you.