[Resolved] How to Change Placeholder Text Color?

[Georgi]

Hello,

I tried all color options from the Customizer but the placeholder text color couldn’t be changed. In the checkout there are placeholders in the fields which with the current color settings for form, makes the placeholder text hard to be seen https://prnt.sc/QbvmTJ31O2Qg

Can you help change the placeholder text color to white?

Link in private area for evidence.

[David]

Hi there,

you can add some CSS:

input::placeholder {
    color: #fff;
}

[Georgi]

Works great! 🙂

Also – how can the hover color be changed when going through variations on single product pages? https://prnt.sc/38yup0tc3KGi

I couldn’t find such an option in the Customizer.

[David]

That is not something the Theme can change.
The Select box is added by the Woocommerce plugin and they don’t add any customizations to it – they leave it up to the Browser. See here fore example is how Mac OS treats a select box:

https://www.screencast.com/t/K0kUx4g6v

[Georgi]

Oh, I see, disappointing 🙁

One more thing – is it normal for the thumbnails in the checkout to be this small https://prnt.sc/2dO0HPTH0DpE
Like did you set this to be default and what is the purpose? Can they be enlarged?

[Ying]

That’s the style added by Woocommerce:
https://www.screencast.com/t/dCphQTS3

You can try this CSS:

.woocommerce-cart table.cart img {
    width: 100px;
}

[Georgi]

Thanks, this did the job!

I’m wondering how can the underlying be removed from links in the breadcrumbs and from the star rating number under a product but the underlying to stay for other links on a webpage? https://prnt.sc/4OSuKW3_kVuZ

This will be very useful if it can be achieved.

[Leo]

Has the original topic about the placeholder text color been resolved?

If so please open a new topic for the separate question.

Thanks!

[Georgi]

Sure!

[Leo]

Thanks 🙂

[Matthias]

as Davids Code above doesn’t change the message area placeholder an addition:

/*Contact Forms7 Placeholder Colors*/
input::placeholder {
    color: #000000;
}

textarea::placeholder {
    color:#000000;
}

I used this Code for Contact Form 7

[David]

Thanks for sharing that Matthias!

[Author]

Posts