Placeholder does not seem to be working for Chrome?

[Croga]

Here is what I have, perhaps someone can let me know if I need to add anything or remove, modify.. thanks. The text renders correctly in FF, but not in Chrome for some reason.... I tried several "placeholder" css that I could find any Chrome still wont change... thanks. This is from inspect...

.searchform-wrapper #woocommerce-product-search-field-0 {
color: gold!important;
}

<input type="search" id="woocommerce-product-search-field-0" class="search-field mb-0" placeholder="Search…" value="" name="s" autocomplete="off">




This is in my CSS header...


::-webkit-input-placeholder{
color: #FFD700;
opacity: 1;
}

::placeholder{
color: #FFD700;
opacity: 1;
}

:placeholder-shown{
color: #FFD700;
opacity: 1;
}

::-moz-placeholder{
color: #FFD700;
opacity: 1;
}

:-moz-placeholder{
color: #FFD700;
opacity: 1;
}


:-ms-input-placeholder{
color: #FFD700;
}

[lucy24]

Simple rule that has stood me in good stead for years: If you think you need !important, you are doing it wrong. (Or, if you prefer: many informational sites are telling you the wrong thing.)

:: interruption here while I go to learn which cat is responsible for thumping noises in next room, and confirm that nothing is broken ::

Ahem. For example:

p.purple {color: #609;}
div.green p {color: #090;}

To stop the second rule from overriding the first and making your purple text green (which it will do in most browsers, regardless of physical rule ordering), expand the first rule to say

p.purple, div.green p.purple {color: #609;}

or simply

p.purple, div[class] p.purple {color: #609;}

mutatis mutandis, of course.

:: final detour to Chrome--which I rarely use--to verify that this works as intended ::

[Croga]

Thanks! Any suggestion on the ::placeholder part?

[Croga]

One other thing. Im using CSSHero to change the css of some of the pages. As you mentioned !important is not good practice, so I am going back through the css file. I have noticed that the original author of the theme used Important on most of the items I am using !important on to override. How do I override his !important, without using !important? Thanks.

[not2easy]

It's that "important!" doesn't do anything. Some people use it as a reminder for some issue, something they might have notes on; that is, it might have meaning to the composer of that css, but browsers don't care about it. It does not actually do anything. If your css holds two different and opposing lines for the same element, only one of them can be implemented.

[lucy24]

Dang, not2easy, I had no idea !important wasn’t supposed to do anything :)

:: detour to css dot org, which in turn takes me to drafts dot csswg dot org (which certainly doesn't sound like a repository for fixed, definitive rules) ::

https://drafts.csswg.org/css-cascade-4/#important

If you can make head or tail of this explanation, you’re a better man than I.

How do I override his !important, without using !important?

Can you edit the theme? (I don't speak WordPress, but not2easy will know.) If so, globally delete all occurrences of !important and you can wash your hands of the whole business.

[Croga]

I am trying to edit the theme through CSSHero, but like I said the Theme Author used !important in the original CSS, I am hesitant on diving into that the vanilla copy, and altering it, for fear Im going to break something I am not aware of, since im not the author of the theme... hope that makes sense. What Im doing seems to be working... and although its probably not good, is it that "bad"?

In addition, how do I get the ::placeholder to work for Chrome? Trying to get search text and email text to default to a certain color. Works in other browsers, cant get Chrome to work on the ::placeholder part. Thanks.

[Croga]

In addition, !important must be doing something, because the css wont override on the same element without it. Like I said the author of the theme used !important for certain elements and I cannot change the color, unless I use another override.

[lucy24]

Whoops, didn’t realize that was an actual (pseudo)element; I thought it was just, haha, a placeholder for posting purposes.

https://caniuse.com/?search=placeholder

leads to Chrome issues [issues.chromium.org] confirming that, yeah, it’s a known Chrome problem. (Which, if I'm reading it right, dates back some seventy version numbers. Sheesh.)

Honestly, if this whole problem applies only to placeholder text, I wouldn't lose any sleep over it. I mean, just how badly does it clash with the overall visuals of the page?

[Croga]

Ok, thanks. Looking at the placeholder css above that I posted, can you recommend cleaning it up? I pretty tried throwing everything and the kitchen sink to get Chrome to work... thanks.

[not2easy]

Because the css you're asking about appears to be part of a proprietary add-on/plugin (woocommerce) you should only be examining and editing the css related to that add on. If it is a plugin, that would be where you'd find its css file. The WP Theme may or may not be one built for woocommerce since it can be added to most any theme. If the placeholder css is only in the woocommerce plugin, that is where to edit it, not the WP Theme's css. WP is a very versatile platform, it could be set up either way, but when you mention it as part of the Theme author's css then it sounds like the theme was built to use woocommerce.

like I said the Theme Author used !important in the original CSS

I am guessing at it for that reason. If the theme was built with woocommerce installed, then yes, it might be part of the theme's css file.

Since Chrome ignores the placeholder element's css, maybe you could add a <p> or <div> that contains the text of the placeholder and put the color there as lucy24 suggested. Even <span class="placeholder"> can be used for the text color but I can't say it is good to replace the css that came with your package because I have no idea whether it is used in different areas of forms. If you wanted to use a span color, the html would need editing wherever it is used.