Bring select inputs in line with text inputs on checkout

[opr]

Changes proposed in this Pull Request:

In dark mode, when inputs are focused, they get a color of #fff and the border matches it. Select inputs are inconsistent and do not get this, so tabbing through a form results in inconsistencies.

(For Bug Fixes) Bug introduced in PR # .

Screenshots or screen recordings:

In both screenshots, the select input is focused.

Before	After

For reference, this is a focused text input

How to test the changes in this Pull Request:

Using the WooCommerce Testing Instructions Guide, include your detailed testing instructions:

1. Set up the Checkout block to use Dark mode inputs
2. Add an item to your cart and go to the Checkout block and expand the address card.
3. Tab through the address fields and ensure the select inputs look visually consistent with the text inputs, when focused and not focused.

Testing that has already taken place:

Milestone

• Automatically assign milestone for the next WooCommerce version

Note: Check the box above to have the milestone automatically assigned when merged.
Alternatively (e.g. for point releases), manually assign the appropriate milestone.

Changelog entry

• Automatically create a changelog entry from the details below.

• This Pull Request does not require a changelog entry. (Comment required below)

Changelog Entry Details

Significance

• Patch
• Minor
• Major

Type

• Fix - Fixes an existing bug
• Add - Adds functionality
• Update - Update existing functionality
• Dev - Development related task
• Tweak - A minor adjustment to the codebase
• Performance - Address performance issues
• Enhancement - Improvement to existing functionality

Message

Changelog Entry Comment

Comment

[github-actions]

Testing Guidelines

Hi @senadir ,

Apart from reviewing the code changes, please make sure to review the testing instructions (Guide) and verify that relevant tests (E2E, Unit, Integration, etc.) have been added or updated as needed.

Reminder: PR reviewers are required to document testing performed. This includes:

• 🖼️ Screenshots or screen recordings.
• 📝 List of functionality tested / steps followed.
• 🌐 Site details (environment attributes such as hosting type, plugins, theme, store size, store age, and relevant settings).
• 🔍 Any analysis performed, such as assessing potential impacts on environment attributes and other plugins, conducting performance profiling, or using LLM/AI-based analysis.

⚠️ Within the testing details you provide, please ensure that no sensitive information (such as API keys, passwords, user data, etc.) is included in this public issue.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yml

Review profile: CHILL

Plan: Pro

Run ID: 64f7f15b-3287-44ec-8931-42d88c7c7287

📥 Commits

Reviewing files that changed from the base of the PR and between 1458129 and 0dbdcb6.

📒 Files selected for processing (2)

• plugins/woocommerce/changelog/fix-select-focus-colors
• plugins/woocommerce/client/blocks/assets/js/base/components/select/style.scss

---

📝 Walkthrough

Walkthrough

Adds a changelog entry documenting a fix to make the select component's focused state consistent with other input types by updating the dark-controls focus styling from border-color-only to explicit color and border properties.

Changes

Cohort / File(s)	Summary
Changelog Entry plugins/woocommerce/changelog/fix-select-focus-colors	Documents a patch-level fix for select component focus color consistency.
Select Component Styling plugins/woocommerce/client/blocks/assets/js/base/components/select/style.scss	Updates dark-controls focus state styling to replace border-color-only with explicit color and 1.5px solid border using currentColor.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically describes the main change: making select inputs consistent with text inputs on checkout, which aligns with the core fix in the changeset.
Description check	✅ Passed	The description is directly related to the changeset, explaining the inconsistency in dark mode focus styling for select inputs and providing context, screenshots, and testing instructions.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/select-focus-colors

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 Stylelint (17.4.0)

plugins/woocommerce/client/blocks/assets/js/base/components/select/style.scss

ConfigurationError: Could not find "@wordpress/stylelint-config/scss". Do you need to install the package or use the "configBasedir" option?
at getModulePath (file:///usr/local/lib/node_modules/stylelint/lib/utils/getModulePath.mjs:29:9)
at loadExtendedConfig (file:///usr/local/lib/node_modules/stylelint/lib/augmentConfig.mjs:241:21)
at extendConfig (file:///usr/local/lib/node_modules/stylelint/lib/augmentConfig.mjs:208:25)
at augmentConfigBasic (file:///usr/local/lib/node_modules/stylelint/lib/augmentConfig.mjs:73:26)
at augmentConfigFull (file:///usr/local/lib/node_modules/stylelint/lib/augmentConfig.mjs:126:30)
at getConfigForFile (file:///usr/local/lib/node_modules/stylelint/lib/getConfigForFile.mjs:102:32)
at async resolveOptionValue (file:///usr/local/lib/node_modules/stylelint/lib/utils/resolveOptionValue.mjs:27:24)
at async standalone (file:///usr/local/lib/node_modules/stylelint/lib/standalone.mjs:202:19)

Tip

Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs).
Share your feedback on Discord.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

Size Change: +8 B (0%)

Total Size: 5.98 MB

_{compressed-size-action}

[github-actions]

Test using WordPress Playground

The changes in this pull request can be previewed and tested using a WordPress Playground instance.
WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Test this pull request with WordPress Playground.

Note that this URL is valid for 30 days from when this comment was last updated. You can update it by closing/reopening the PR or pushing a new commit.