Streaming live at 10am (PST)

Change Form Placeholder Text Color?


#1

Hey All,

I feel like I have done this before but I can't figure it out. I have a form where the background of the cell is almost the same color as the placeholder text. I need to change the color of that placeholder text so its actually visible. Is this possible?

Thanks,
Dave


My placeholder text is two different colours
Adjusting Form Text Colors
#2

Webflow doesn't support this in their UI, but you can add this in your custom code:

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

Replace #999 with a hex color. If you want the placeholder color for a specific form, add your class name like this: .contact-form::-webkit-input-placeholder


#3

Hi, I had a case recently were I needed to use this code, but it did not unfortunately work for me. I just point that out, in case you try this yourself, and it does not work. I am investigating if there is some workable js/css workaround, but at the moment, I do not have any other solution. Cheers!


#4

Opacity needs to be set to 1 now. Firefox default placeholder opacity is 0.4 - Just spent the last number of hours stuck on this one! Doh!!


#5

This is not working for me too... =/


#6

The only thing that worked for me is

$('[placeholder]').focus(function() {
    var input = $(this);
    if (input.val() == input.attr('placeholder')) {
        input.val('');
        input.removeClass('placeholder');
    }
}).blur(function() {
    var input = $(this);
    if (input.val() == '' || input.val() == input.attr('placeholder')) {
        input.addClass('placeholder');
        input.val(input.attr('placeholder'));
    }
}).blur();
$('[placeholder]').parents('form').submit(function() {
    $(this).find('[placeholder]').each(function() {
        var input = $(this);
        if (input.val() == input.attr('placeholder')) {
            input.val('');
        }
    })
});

Just load this javascript and then edit your placeholder with CSS by calling this rule:

form .placeholder {
   color: #222;
   font-size: 25px;
   /* etc */
}

The source: http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css


#7

if you add the class w-input before it works perfectly.

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

#8

Why is this not working?

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

#9

Hi @Make , can you try it without these parts:

signup-field invert

Try styling it like in the example:

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

The example did not have the additional classes. I am not sure this will work with additional classes added.


#10

Hi,

That did work but I need to target a specific class in order to show placeholder text white og green background. I have two forms on my site.


#11

Ahh! this actually did work!

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

#12

@Make, cool, thanks for the update smile Cheers, Dave


#13

This one is working for me:

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

</style>

#14

Hi folks,

I tried your different solutions, but every time I copy-paste code in the "Head code" of the "Custom code" section, it doesn’t work. The input placeholder doesn't change color.

Sounds like there is something I am missing! Should I add something else in the Design view? Do something else than copy-paste the code?

Thank you guys! smile


#15

Hi @laurentdesserre, the code that @Daniel_Sun is working for me, see the working, cloneable example:

https://webflow.com/website/input-placeholder-color?s=input-placeholder-color

​I hope this helps. If not, please let me know – I'm happy to assist further! smile

Cheers,
Dave


Edit form placeholder using "Add atributes"?
#16

Working great. Thank you so much Dave!


#17

@Daniel_Sun Is there a way to make this work in IE9 as well?


#18

@jdesign, have a look in this tread:


#20

which class do I have to insert in the code, when I have different forms but just want to change one ? The class for the specific form wrapper ? The Div Block ?

Thank you very much!


#21

Why can't we just change the colour in the design panel???? So frustrating!