Adjusting Form Text Colors

Design help Custom code
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 ( Change Form Placeholder Text Color? ) 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; }

700×378 156 KB

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.

1187×605 36.2 KB

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!

1283×566 35.4 KB

6

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

Glad we could help :+1: