Code for comment box background color

Store Design
,

Topic summary

A user is attempting to modify the background color of contact form fields in Shopify’s Dawn theme using custom CSS. Their current code successfully changes the color of name, email, and phone number fields but fails to affect the comment/textarea field.

Current Issue:

  • The CSS selector input.field__input only targets input elements, not textarea elements
  • The comment box requires a separate selector to be styled

Proposed Solution:
Another user provided comprehensive CSS code that:

  • Targets both input and textarea fields using #ContactForm input.field__input and #ContactForm textarea.field__input
  • Includes styling for labels, background colors, text colors, and placeholder text
  • Should be added to the bottom of the base.css file

Status: A solution has been offered but not yet confirmed as working by the original poster.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

Hi all. I’m trying to change the background color on the text fields for my contact form using custom CSS for the section (Dawn theme). I have tried adding code to the entire theme in assets/base.css, assets/component-card.css, theme.liquid, and other fields as I have found in other posts but these have made no changes.

Editing the section has done what I want it to do, however, it is only changing the name, email, and phone number fields and is not changing the comment field. I have attached a screenshot of the fields being different colors (it’s hard to see as the color I’m aiming for is dark red and the color I’m trying to change from is black) and the code I used, which is

input.field__input {
background-color: # !important;
}

How do I do this to include the comment box? Thank you!

2

Hello @ExtremeCNC ,
Please try this code to change the background color of the contact form fields. Add it to the bottom of the base.css file.

/* Change the color of form field labels */
label.field__label {
    color: white; /* Replace with your desired color */
}

/* Style the input and textarea fields in the contact form */
#ContactForm input.field__input,
#ContactForm textarea.field__input {
    background-color: #8B0000 !important; /* Replace with your desired color */
    color: #FFFFFF !important;        /* Replace with your desired color */
}

/* Optional: Change placeholder text color (if needed) */
#ContactForm input.field__input::placeholder,
#ContactForm textarea.field__input::placeholder {
    color: #CCCCCC !important; /* Replace with your desired color */
}

Thanks!