CSS приклад: Псевдоэлемент ::-ms-reveal

Оновлення браузерів

Internet Explorer Chrome Opera Safari Firefox Android iOS
10.0+

Версії CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Опис

Встановлює стиль кнопки для перегляду пароля у полі input type="password". Кнопка спочатку невидима і з'являється при введенні пароля у правій частині поля. Якщо клікнути на цю кнопку і утримувати ліву кнопку миші, замість крапок буде показаний введений пароль.

Синтаксис

селектор::-ms-reveal { ... }

Значення

Немає.

Приклад

HTML5CSS3IE 10CrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>::-ms-reveal</title>
  <style>
   input[type="password"]::-ms-reveal {
    background: #c00;
    color: #fff;
   }
  </style>
 </head>
 <body>
  <form action="handler.php">
   <input type="password" name="pass" placeholder="Введіть пароль">
   <input type="submit" value="Увійти">
  </form>
 </body>
</html>

Результат цього прикладу показано на рис. 2.

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

  • Q: Як використовувати псевдоелемент ::-ms-reveal в CSS?

    A: Псевдоелемент ::-ms-reveal використовується для стилізації вмісту, який розкривається після введення тексту в текстове поле в Internet Explorer.

  • Q: Де використовують псевдоелемент ::-ms-reveal в CSS?

    A: Псевдоелемент ::-ms-reveal використовується для стилізації елементів у веб-додатках, які підтримують Internet Explorer.

  • Q: Чи підтримується псевдоелемент ::-ms-reveal в інших браузерах, крім Internet Explorer?

    A: Псевдоелемент ::-ms-reveal розроблений спеціально для Internet Explorer і не підтримується в інших браузерах.

  • Q: Які стилі можна застосовувати до псевдоелемента ::-ms-reveal?

    A: До псевдоелемента ::-ms-reveal можна застосовувати різні CSS властивості, такі як кольори, розміри, шрифти тощо.

  • Q: Чи є альтернативи для використання псевдоелемента ::-ms-reveal?

    A: У більш сучасних браузерах зазвичай використовуються інші підходи для реалізації подібного функціоналу, наприклад, за допомогою JavaScript.