How can I alter the color of my contact form fields?

Store Design

Topic summary

A user seeks to customize contact form fields in their Shopify Venture theme, specifically wanting black/transparent backgrounds with white text and borders instead of the default white fields.

Solution Provided:
A CSS code snippet was shared to add to the theme.scss.liquid file:

.contact-form input, textarea, select {
    background: #000;
    border: 1px solid #fff;
    color: #fff;
}

Follow-up Requests:

  • Apply same styling to Account page fields
  • Adjust field labels (Name, Email, Message) to full opacity white
  • Align “Contact Us” title with body text

Additional Issue:
Another user successfully applied inverted colors (white background, black text) to first/last name fields but the message field (textarea) didn’t update. They’re seeking additional code to target the message field specifically.

Open Question:
One user asks where to add the code if their theme lacks a theme.scss.liquid file, indicating potential theme structure variations.

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

Hello,

I am looking to change the text fields of my contact form from white to black (or transparent, as the background of my website is black), and I would like the font to be white (#FFFFFF). I would also like a white border (#FFFFFF) around the actual text fields if possible.

My website is https://nightshiftintl.com for reference, using the Venture theme.

Thank you,

Chris

2

@chrispabey ,

.contact-form input, textarea, select {
    background: #000;
    border: 1px solid #fff;
    color: #fff;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid

1 Like
3

Hi, that worked perfectly, thank you very much!

4

If you don’t mind, there are a few other small bits of code I could use.

I’m looking to do the exact same thing on the “Account” page - making the text fields black with a white border and font.

On the Contact page, I’d like to make the titles of each box (Name, Email, Message) all written above the box, and at full opacity (fully white).

And lastly, I’d like to make the title “Contact Us” align with the body text and text fields (so it should come to the right a bit).

I thank you very much for your help,

Chris

5

Where can I add the code, if I don’t have theme.scss.liquid?

6

Hi there, I had the same question as the original poster but the inverse (wanted the inside of my text fields to be white, and the font to be black). I used the above code just switching the colors and it worked perfectly on the first name and last name fields in my contact area! But it did not change the message field. Do you know what else I need to add to the code to have it work on the message field as well? This is what I copied/pasted in, and this is my contact us page after making that change:

https://summerset.co/pages/contact

.contact-form input, textarea, select { background: #fff; border: 1px solid #000; color: #000; }