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

[chrispabey]

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

[oscprofessional · Accepted solution]

@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

[chrispabey]

Hi, that worked perfectly, thank you very much!

[chrispabey]

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

[Gamze1]

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

[luxfactory]

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; }