Как отлаживать псевдозаполнитель заполнителя в firefox?

У меня есть код CSS следующим образом:

:-moz-placeholder,::-moz-placeholder {
    color:    #999;
    /*some additional font styling*/
}

Я могу щелкнуть "Осмотреть элемент" и просмотреть всю информацию о стилях элемента. Но где я могу увидеть все правила CSS, которые применимы к элементу-заполнителю?

Ответы

Ответ 1

Placeholder - псевдоэлемент, например:: before и:: after (https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements) иногда называют псевдоклассом (https://developer.mozilla.org/en-US/docs/Web/CSS/pseudo-classes)

Эти типы элементов нельзя было увидеть в Firefox Inspector, вам нужны были, по крайней мере, Firebug или Chrome Dev Tools, но в последнее время он также доступен в Firefox Inspector. Они являются частью "теневого дома" (чрезвычайно простое описание: элементы, созданные браузером внутри других элементов).

Вы должны иметь возможность находить местозаполнитель в инспекторах дома внутри ваших элементов ввода или textarea, например. выберите элемент ввода, затем выберите "проверить элемент" в правом меню, затем вы увидите что-то вроде этого:

Инспектор Firefox

Firefox Inspector Pseudo Elements

Инструменты Chrome Dev

ChromeDevTools Inspect Element

Для Chrome вам может потребоваться включить "Показать тень пользователя DOM" в настройках Dev Tools.

Ответ 2

  • В адресной строке перейдите по адресу: about: config
  • Найдите свойство: dom.webcomponents.enabled и отметьте его как true.
  • Если вы уже на странице разработки, не забудьте перезагрузить его.

После этого вы сможете щелкнуть по псевдоэлементам: до и: после и посмотреть их стиль. Не уверен, почему это отключено, в Chrome работает по умолчанию.

Из этого ссылка

Ответ 3

Чтобы дать обновленный ответ всем, кто еще посещает эту страницу, в FireFox v66 вы можете раскрыть стили псевдоэлементов, просто щелкнув значок расширения на панели стилей при проверке элемента в Developer Tools-, см. Скриншот: [ TG30]