Input Field Label Help

Store Design

Topic summary

A user encountered a readability issue where beige-colored input field labels became difficult to read when validation errors triggered red border highlighting. They needed the label text color to change to navy blue specifically when error states were active.

Solution provided:

  • Navigate to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS
  • Add CSS targeting error states using the :has() pseudo-class selector
  • The code changes label color to navy (#003263) only when error messages are present

Code snippet:

.cf-field[data-cf-field-type="email"]:has(ul.cf-field-errors) > label {
    color: #003263;
}

The solution was successfully implemented and resolved the accessibility concern.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I realized that when the input entered is invalid/incorrect, the input fields are highlighted with a red box. The problem. with that is that the beige text becomes difficult to read, is there a way to change the text colour to navy – but only when the red box is there.

Screenshot 2025-01-05 at 6.01.54 PM.png
Screenshot 2025-01-05 at 6.01.54 PM.png924×624 24 KB

Thank you,

Chichi0114

2

Hi @chichi0114

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
.cf-field[data-cf-field-type="email"]:has(ul.cf-field-errors) > label {
    color: #003263;
}

Here is the result:

image_720.png
image_720.png720×470 30.6 KB

I hope this helps

Best,

Daisy

1 Like
3

Hi DaisyVo,

Thank you!! It worked :slightly_smiling_face:

Best,

Chichi0114