Need help on changing the text field color inside a form

Design help Custom code
1

Hi!

Please help me with something. I’m trying to change the color of my textfield in webflow, is there code I can embed or a way I can do so in webflow? I have attached some screenshots of my problem please see attached.

1023×108 6.36 KB

Thanks in advance.

2

Hi there,

Placeholder text is styled by the browser.

The code of an input is approximately that:

<form id="first-form">
<input id="email-form" placeholder="Enter your name" maxlength="256">
</form>

You can reach the placeholder text and style it using a pseudo-class :placeholder. So like this:

input:placeholder

In order to constraint the changes to the specific element, you can set it like this:

form#email-form input:placeholder

So final code can be something like this:

<style>
form#email-form input:placeholder { color:red; font-weight:700; }
<style>

And you put that in the section of the custom code tab of your sites’ settings. (or at page level) (Of course you change email-form to the ID you gave to the form, or only use form input:placeholder to impact all forms on the site.)

1 Like
3

Hi @vincent

Thanks a lot for your help. I found a way to change the colour, not for the whole site but for selected pages.

I placed a component >embed then I added this code inside

    <style>
.w-input::-webkit-input-placeholder { /* WebKit browsers */
    color:    #ffffff;
}
.w-input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #ffffff;
    opacity: 1;
}
.w-input::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #ffffff;
    opacity: 1;
}
.w-input:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #ffffff;
}
</style>

Appreciate your help!

3 Likes
4

Thanks @starlord, this saved my day. Hero!

2 Likes