CSS中的::placeholder

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/10/22/CSS%E4%B8%AD%E7%9A%84-placeholder/

摘要

本文主要讲述了：

作用

正文

作用

修改<input>和<textarea>的 placeholder 的样式

示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" placeholder="placeholder" />
    <textarea placeholder="placeholder"></textarea>
    <style>
      ::placeholder {
        color: #f00;
        opacity: 0.5;
        font-weight: bold;
        font-size: 18px;
        font-style: italic;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
      }
    </style>
  </body>
</html>

示例：

注意：无法使用 CSS 的选择器列表

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" placeholder="placeholder" />
    <textarea placeholder="placeholder"></textarea>
    <style>
      ::-moz-placeholder {
        color: #f00;
        opacity: 0.5;
        font-weight: bold;
        font-size: 18px;
        font-style: italic;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
      }
      ::-webkit-input-placeholder {
        color: #f00;
        opacity: 0.5;
        font-weight: bold;
        font-size: 18px;
        font-style: italic;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
      }
      ::placeholder {
        color: #f00;
        opacity: 0.5;
        font-weight: bold;
        font-size: 18px;
        font-style: italic;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
      }
    </style>
  </body>
</html>