Placeholder text

[dotdash]

Hello there,

This is a css query for the fields in the calendar toolbar: how do I control the appearance of the placeholder text?

The following methods are ignored, yet this seems to be the recommended way of doing it:

input:-moz-placeholder {}
input::-moz-placeholder {}
input:-ms-input-placeholder {}
input::-webkit-input-placeholder {}

Cheers,

Spencer

[Zach Tirrell]

Hello again Spencer 🙂

The default styles that I think you are trying to override are these:

input[name*="tribe-bar-"]::-webkit-input-placeholder {
color: #5f5f5f;
font-weight: normal;
font-style: italic;
line-height: 1.3;
}
input[name*="tribe-bar-"]:-moz-placeholder {
color: #5f5f5f;
font-weight: normal;
font-style: italic;
line-height: 1.3;
}


You’ll notice that our selectors have just a bit more CSS specificity than what you were experimenting with, this is so that ours do not alter the other placeholder text in your theme. If you match our selectors in CSS that is enqueued later, you’ll be able to style these however you see fit.

Let us know if this works for you!

[dotdash]

Hey Zach,

That’s perfect, thanks!

Cheers,

Spencer

[Zach Tirrell]

Fantastic, I’m glad that helped you through it!

Thanks for following up and confirming the answer. I’m going to go ahead and close this thread, but please feel free to start a new one if anything else pops up and we’d be happy to help.

[Author]

Posts