Streaming live at 10am (PST)

Adjusting Form Text Colors


#1

I have a form that utilizes a dark background, which doesn't contrast well with text entered into an input field.
I came across this helpful post that gives code for the hint text ( https://forum.webflow.com/t/change-form-placeholder-text-color/2278 ) but it doesn't have the specific lines of code for text entered into a field. Anyone happen to know what to include?

Live:
http://hickoryprinting.webflow.io/

Preview:
https://preview.webflow.com/preview/hickoryprinting?preview=8627dac1c7a52e921240209a45de4188


#2

Hi @Port_of_Folio,

Having looked at the live link you posted it seems you have no font colour set on the input field.
All you need to do is add a color style to the class .contact-form-fields

Hope this helps.


#3

Thanks! Yes, I'm able to narrow down using the inspector as shown in the attachment. My problem is that (not being a coder) I don't know specifically how type it out in the custom code panel. This is what I currently have:


input.input-box, textarea { background: white; color: white; }
.w-input::-webkit-input-placeholder { /* WebKit browsers */
color: white;
}
.w-input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: white;
opacity: 1;
}
.w-input::-moz-placeholder { /* Mozilla Firefox 19+ */
color: white;
opacity: 1;
}
.w-input:-ms-input-placeholder { /* Internet Explorer 10+ */
color: white;
}
input.white-text, textarea { color: white; }


#4

@Port_of_Folio The layout i would use is


.w-input::-webkit-input-placeholder {
color: #f5f5f5;
}

.w-input:-moz-placeholder {
color: #f5f5f5;
}

.w-input::-moz-placeholder {
color: #f5f5f5;
}

.w-input:-ms-input-placeholder {
color: #f5f5f5;
}
.w-input {
color: #f5f5f5;
}

.text-field {
color: #f5f5f5;
}

But i would also mention that i only use custom code when it is necessary. Placeholder text can't be changed in the Webflow editor but text entered into the input can so i would do this as shown in the attached image.


#5

Thanks so much! I didn't realize the type color specified in the designer applied to the entered text. I was so confused by your screen grab because the placeholder text in designer stays light gray like my screen grab. :thinking:

It wasn't until I used preview mode, entered some text, then went back to design mode. Then I was able to recreate what your screen grab shows. Thought I was going crazy.

Thanks again for the tip!


#6

Sorry for the confusion @Port_of_Folio i probably should of explained myself better.

Glad we could help :+1: