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
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
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!
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!!
This is not working for me too… =/
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: html - Change a HTML5 input's placeholder color with CSS - Stack Overflow
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>
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>
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.
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.
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>
@Make, cool, thanks for the update 
Cheers, Dave
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>
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! 
Hi @laurentdesserre, the code that @Daniel_Sun is working for me, see the working, cloneable example:
I hope this helps. If not, please let me know – I’m happy to assist further!
Cheers,
Dave
Working great. Thank you so much Dave!
@Daniel_Sun Is there a way to make this work in IE9 as well?
@jdesign, have a look in this tread:
http://stackoverflow.com/questions/15020826/how-to-support-placeholder-attribute-in-ie8-and-9
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!
Why can’t we just change the colour in the design panel??? So frustrating!