CSS приклад: Псевдокласс ::-moz-placeholder

Псевдоклас ::-moz-placeholder

Псевдоклас, який використовується для стилізації підказуючого тексту, створеного атрибутом placeholder. Ви можете використовувати цей псевдоклас разом з ::-moz-placeholder для зміни вигляду тексту, наприклад, встановити шрифт і колір.

Синтаксис

input::-moz-placeholder {...}
textarea::-moz-placeholder {...}

Опис

Немає.

Приклад

HTML5, CSS2.1, CSS3, Firefox

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
  <title>-moz-placeholder</title>
  <style>
   body { background: #053f38; }
   input[type="search"] { 
    border: 1px solid #98baba;
    background: transparent;
    padding: 1px 4px;
    color: #fff;
   }
   input[type="search"]::-moz-placeholder {
    color: #ffd595;
   }
  </style>
 </head>
 <body>
  <form>
   <p><input type="search" placeholder="Поиск по сайту" name="q">
   <input type="submit" value="Найти"></p>
  </form>
 </body>
</html>

Результат примеру показаний на рис. 1.

Браузери

Firefox підтримує запис з одним двокрапкою до версії 19.0.

Safari і Chrome підтримують псевдоклас ::-webkit-input-placeholder.

Часті запитання

  • Q: Як використовувати псевдоклас ::-moz-placeholder в CSS?

    A: Псевдоклас ::-moz-placeholder використовується для стилізації плейсхолдера у текстових полях на веб-сторінці в браузерах, які підтримують цей префікс для Mozilla Firefox.

  • Q: Де використовують псевдоклас ::-moz-placeholder в CSS?

    A: Псевдоклас ::-moz-placeholder можна використовувати у CSS для стилізації плейсхолдера у текстових полях на веб-сторінці, якщо необхідно зробити це саме для браузерів, які підтримують Mozilla-префікс.

  • Q: Для чого потрібен псевдоклас ::-moz-placeholder в CSS?

    A: Псевдоклас ::-moz-placeholder використовується для задання стилів для плейсхолдера у текстових полях на веб-сторінці в браузерах, які підтримують Mozilla-префікс.

  • Q: Які браузери підтримують псевдоклас ::-moz-placeholder в CSS?

    A: Псевдоклас ::-moz-placeholder підтримується в браузерах, які використовують рушій Gecko, таких як Mozilla Firefox.

  • Q: Чи потрібно використовувати псевдоклас ::-moz-placeholder разом з ::placeholder?

    A: Так, якщо ви хочете задати різні стилі для плейсхолдера в Mozilla Firefox та інших браузерах, то можна використовувати ::-moz-placeholder для Firefox і ::placeholder для інших браузерів.