Inconsistent select field styles in My Account section

[nielslange]

Describe the bug

When reviewing woocommerce/woocommerce#53521, I noticed that when adding additional select fields, the styles of the select fields are inconsistent.

Isolating the problem (mark completed items with an [x]):

• I have deactivated other plugins and themes and confirmed this bug occurs when only WooCommerce + Storefront theme are active.
• I can reproduce this bug consistently using the steps below.

To Reproduce

1. Verify that Consistent legacy form styling for standard and select2 selects under Checkout/My Account woocommerce#53521 has been merged already or test the issue against that PR.
2. Install and activate the Code Snippets plugin.
3. Add the following code snippet:

add_action(
    'woocommerce_init',
    function () {
        woocommerce_register_additional_checkout_field( array(
            'id'          => 'mynamespace/number',
            'type'        => 'select',
            'label'       => 'Choose number',
            'location'    => 'address',
            'required'    => false,
            'options'     => array(
                array(
                    'value' => 1,
                    'label' => 'One',
                ),
                array(
                    'value' => 7,
                    'label' => 'Seven',
                ),
            ),
            'placeholder' => 'Hello, choose a number!',
        ) );
    }
);

4. Go to my-account/edit-address/billing/ using Firefox and Safari.
5. See that the styles of the Choose number field are different than the styles of the Country / Region field.

Screenshots

Firefox:

Safari:

Expected behavior

I expect the styles of added select fields to look like the styles of existing select fields.

Browser Environment

• Platform: macOS
• Browser(s): Firefox and Safari

WordPress Environment

System Status Report

### WordPress Environment ###

WordPress address (URL): [Redacted]
Site address (URL): [Redacted]
WC Version: 9.6.0-dev
Legacy REST API Package Version: The Legacy REST API plugin is not installed on this site.
Action Scheduler Version: ✔ 3.9.0
Log Directory Writable: ✔
WP Version: 6.7.1
WP Multisite: –
WP Memory Limit: 512 MB
WP Debug Mode: –
WP Cron: ✔
Language: en_US
External object cache: –

### Server Environment ###

Server Info: nginx/1.25.4
PHP Version: 8.2.19
PHP Post Max Size: 512 MB
PHP Time Limit: 30
PHP Max Input Vars: 1000
cURL Version: 8.8.0
(SecureTransport) OpenSSL/3.3.0

SUHOSIN Installed: –
MySQL Version: 8.3.0
Max Upload Size: 512 MB
Default Timezone is UTC: ✔
fsockopen/cURL: ✔
SoapClient: ✔
DOMDocument: ✔
GZip: ✔
Multibyte String: ✔
Remote Post: ✔
Remote Get: ✔

### Database ###

[REDACTED]

### Post Type Counts ###

attachment: 25
customize_changeset: 2
page: 10
post: 16
product: 21
product_variation: 2
revision: 56
shop_coupon: 3
shop_order: 6
shop_order_placehold: 3
shop_subscription: 2
wp_font_face: 36
wp_font_family: 12
wp_global_styles: 2
wp_navigation: 1
wp_template: 1

### Security ###

Secure connection (HTTPS): ✔
Hide errors from visitors: ✔

### Active Plugins (8) ###

Code Snippets: by Code Snippets Pro – 3.6.6.1
SMNTCS Nord Admin Theme: by Niels Lange – 1.4
SMNTCS Show Active Plugins: by Niels Lange – 1.0
SMNTCS Show Symlinked Plugins: by Niels Lange – 1.3
SMNTCS Theme List View: by Niels Lange – 1.3
WooCommerce Stripe Gateway: by Stripe – 9.0.0
WooCommerce Subscriptions: by WooCommerce – 7.0.0
WooCommerce: by Automattic – 9.6.0-dev

### Inactive Plugins (0) ###


### Settings ###

Legacy API Enabled: –
Force SSL: –
Currency: EUR (€)
Currency Position: left
Thousand Separator: .
Decimal Separator: ,
Number of Decimals: 2
Taxonomies: Product Types: external (external)
grouped (grouped)
simple (simple)
subscription (subscription)
variable (variable)
variable subscription (variable-subscription)

Taxonomies: Product Visibility: exclude-from-catalog (exclude-from-catalog)
exclude-from-search (exclude-from-search)
featured (featured)
outofstock (outofstock)
rated-1 (rated-1)
rated-2 (rated-2)
rated-3 (rated-3)
rated-4 (rated-4)
rated-5 (rated-5)

Connected to WooCommerce.com: –
Enforce Approved Product Download Directories: ✔
HPOS feature enabled: ✔
Order datastore: Automattic\WooCommerce\Internal\DataStores\Orders\OrdersTableDataStore
HPOS data sync enabled: –

### Logging ###

Enabled: ✔
Handler: Automattic\WooCommerce\Internal\Admin\Logging\LogHandlerFileV2
Retention period: 30 days
Level threshold: –
Log directory size: 151 KB

### WC Pages ###

Shop base: #54 - /products-beta/classic-shop/
Cart: #56 - /cart/ -  Contains the woocommerce/cart block
Checkout: #57 - /checkout/ -  Contains the woocommerce/checkout block
My account: #60 - /my-account/
Terms and conditions: #61 - /terms/

### Theme ###

Name: Storefront
Version: 4.6.0
Author URL: https://woocommerce.com/
Child Theme: ❌ – If you are modifying WooCommerce on a parent theme that you did not build personally we recommend using a child theme. See: How to create a child theme
Theme type: Classic theme
WooCommerce Support: ✔

### Templates ###

Overrides: –

### Subscriptions ###

WCS_DEBUG: ✔ No
Subscriptions Mode: ✔ Live
Subscriptions Live URL: https://store.test
Subscriptions-core Library Version: 7.8.0
Subscription Statuses: wc-active: 1
wc-on-hold: 1

WooCommerce Account Connected: ❌ No
Report Cache Enabled: ✔ Yes
Cache Update Failures: ✔ 0 failure

### Store Setup ###

Country / State: Indonesia — Jawa Barat

### Subscriptions by Payment Gateway ###

Stripe: wc-active: 1
wc-on-hold: 1


### Payment Gateway Support ###

Stripe: products
refunds
tokenization
add_payment_method
subscriptions
subscription_cancellation
subscription_suspension
subscription_reactivation
subscription_amount_changes
subscription_date_changes
subscription_payment_method_change
subscription_payment_method_change_customer
subscription_payment_method_change_admin
multiple_subscriptions

Direct bank transfer: products
Check payments: products
Cash on delivery: products

### Admin ###

Enabled Features: activity-panels
analytics
product-block-editor
coupons
core-profiler
customize-store
customer-effort-score-tracks
import-products-task
experimental-fashion-sample-products
shipping-smart-defaults
shipping-setting-tour
homescreen
marketing
mobile-app-banner
onboarding
onboarding-tasks
pattern-toolkit-full-composability
product-custom-fields
remote-inbox-notifications
remote-free-extensions
payment-gateway-suggestions
printful
shipping-label-banner
subscriptions
store-alerts
transient-notices
woo-mobile-welcome
wc-pay-promotion
wc-pay-welcome-page
launch-your-store

Disabled Features: product-data-views
experimental-blocks
coming-soon-newsletter-template
minified-js
product-pre-publish-modal
settings
async-product-editor-category-field
product-editor-template-system
blueprint
reactify-classic-payments-settings
use-wp-horizon
add-to-cart-with-options-stepper-layout
blockified-add-to-cart

Daily Cron: ✔ Next scheduled: 2024-12-20 03:57:17 +00:00
Options: ✔
Notes: 68
Onboarding: completed

### Action Scheduler ###

Complete: 469
Oldest: 2024-11-26 03:39:49 +0000
Newest: 2024-12-20 03:03:05 +0000

Failed: 3
Oldest: 2024-11-26 04:00:17 +0000
Newest: 2024-12-11 08:14:17 +0000

Pending: 2
Oldest: 2024-12-20 05:51:17 +0000
Newest: 2025-01-09 07:59:41 +0000


### Status report information ###

Generated at: 2024-12-20 03:05:11 +00:00