1

HTML input fields can have a placeholder text that is shown while the field is empty. You can style the look of this text with the ::placeholder pseudo class. But there's a problem: This CSS breaks as soon as there is an unknown pseudo class present in the statement.

So this works:

.header-search-input::placeholder {
    color: red;
}

... but this doesn't (in Chrome):

.header-search-input::-moz-placeholder, 
.header-search-input::placeholder {
    color: red;
}

... because the browser expects this to be done like so:

.header-search-input::-moz-placeholder {
    color: red;
}

.header-search-input::placeholder {
    color: red;
}

Fiddle: https://jsfiddle.net/eqftxyc6/2/

Is there a way to prevent these prefixes from being auto-generated by the SCSS compiler, or to get it to compile them correctly?

snorri
  • 55
  • 7
  • Have a look at this: https://stackoverflow.com/questions/17181849/placeholder-mixin-scss-css – Pat Dobson May 28 '21 at 08:39
  • Agreed, they should all be red. It's not exactly that the browser expects them all to be just one selector at a time, .header-search-input:: -webkit-placeholder,.header-search-input::placeholder works on Chrome but as soon as it finds one it doesn't recognise it seems to bail out. – A Haworth May 28 '21 at 08:44

1 Answers1

0

You must separate rules in 3 groups, do not combine them in one unique CSS rule...

Try it to custom the placeholder text

    :-moz-placeholder,
    ::-moz-placeholder{ color:red; } 

    :-ms-input-placeholder{ color:red; }

    ::-webkit-input-placeholder,
    ::placeholder{ color:red; }
EsseBé
  • 41
  • 3