1638577 - question/bug(userChrome.css): placeholders customization

Status: UNCONFIRMED

(Firefox :: Toolbars and Customization, defect, P5)

Description

[Sasha Chernykh]

1. Summary

I can't customize placeholders in address bar and search bar.

I successfully customize my Firefox bookmarks, context menu, toolbar buttons, icons and so on, but I can't customize placeholders.

Possible bug.

2. Reproducibility

I reproduce the problem in a portable Firefox version without any addons and user settings (besides toolkit.legacyUserProfileCustomizations.stylesheets = true).

3. Steps to reproduce

I created a file userChrome.css, its content:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

.searchbar-textbox::placeholder,
#urlbar-input::placeholder,
.urlbar-input-box::placeholder,
.urlbar-input-box > .urlbar-input::placeholder,
#searchbar .textbox-input::placeholder,
#urlbar *|*.textbox-input::placeholder,
*|*.textbox-input::placeholder,
moz-input-box::placeholder,
input::urlbar-input::placeholder,
html:input::urlbar-input::placeholder,
input::placeholder,
textarea::placeholder,
html:input::placeholder,
::placeholder
{
	color: red !important;
	opacity: 1 !important;
}

I saved userChrome.css → I restarted Firefox.

4. Expected behavior

Red placeholders.

5. Current behavior

No effect.

6. Not helped

1. I searched information about this problem in Google and Bugzilla.
2. As described here, I enabled and run BrowserToolbox → I found required CSS elements for placeholders. I tried to customize my placeholders, use them (see item 3 of my issue) in userChrome.css.
3. I searched ::placeholder in all userChrome.css GitHub files. I tried to customize my placeholders (see item 3 of my issue) as another GitHub users.
4. Adding @namespace url(http://www.w3.org/1999/xhtml); line as in Firefox default forms.css.
5. Adding -moz-appearance: none !important;.

7. Environment

1. Windows 10.0.18363 Pro N for Workstations 64-bit EN
2. Firefox Portable 76.0.1 (64-bit)

Thanks.

Comment 1

[Jared Wein [:jaws] (please needinfo? me)]

.searchbar-textbox {
  color: orange;
}

changes the placeholder and the user input text to orange. I also couldn't find a way to change the placeholder color independently.