使用 CSS 如何更改 HTML5 输入占位符的颜色-之路教程

←如何使用 CSS 在滚动时修改背景图像

使用 CSS 如何更改 PNG 图像的颜色→

使用 CSS 如何更改 HTML5 输入占位符的颜色

HTML5 有一个称为占位符的属性。

在 <input> 和 <textarea> 元素上使用的此属性向用户提供了可以在字段中输入的内容的提示。

如何设置占位符文本的颜色

在大多数浏览器中，占位符文本的默认颜色是浅灰色。
如果要更改它，则需要使用 ::placeholder 伪元素。

请注意，Firefox 为占位符添加了较低的不透明度，因此请使用 opacity: 1;要解决这个问题。

如果我们想在显示占位符文本时选择输入本身，请使用 :placeholder-shown 伪类。

代码示例如下所示。

更改占位符文本颜色的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      input {
        width: 90%;
        padding: 10px;
        margin: 5px;
        outline: none;
      }
      input[type="submit"] {
        width: 150px;
      }
      input::placeholder {
        color: #1c87c9;
        opacity: 1;
      }
      input:placeholder-shown {
        border: 1px solid #095484;
      }
    </style>
  </head>
  <body>
    <form action="/form/submit" method="post">
      First name:
      <input type="text" name="firstname" placeholder="John">
      <br>
      <br> Last name:
      <input type="text" name="lastname" placeholder="Lennon">
      <br>
      <br> Email address:
      <input type="email" name="email" placeholder="YourEmail@gmail.com">
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>

我们还可以更改文本颜色，它将填充占位符的位置。
为此，为每个 <input> 元素定义一个类并为其设置样式。

为占位符文本设置不同颜色的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      input {
        padding: 10px;
        margin: 5px;
        width: 90%;
      }
      input[type="submit"] {
        width: 100px;
      }
      .one {
        color: #8ebf42;
      }
      .two {
        color: #ff0066;
      }
      .three {
        color: #1c87c9;
      }
      .one::placeholder {
        color: #1c87c9;
      }
      .two::placeholder {
        color: #ff0000;
      }
      .three::placeholder {
        color: #8ebf42;
      }
      input:placeholder-shown {
        border: 1px solid #095484;
      }
    </style>
  </head>
  <body>
    <form action="/form/submit" method="post">
      First name:
      <input class="one" type="text" name="firstname" placeholder="John">
      <br>
      <br> Last name:
      <input class="two" type="text" name="lastname" placeholder="Lennon">
      <br>
      <br> Email address:
      <input class="three" type="email" name="email" placeholder="YourEmail@gmail.com">
      <input type="submit" value="Send" />
    </form>
  </body>
</html>

重要的是要记住，每个浏览器都有不同的实现方式。
例如，

::-webkit-input-placeholder 用于 Chrome/Safari/Opera 的伪元素，
Edge 的 ::-ms-input-placeholder 伪类（也支持 webkit 前缀）。

上述伪类和伪元素是处理所需结果所必需的。

使用一些扩展更改占位符文本颜色的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      input {
        padding: 5px 10px;
      }
      ::placeholder {
        color: #1c87c9;
        opacity: 1;  /* Firefox */
      }
      :-webkit-input-placeholder {
        /* Chrome, Safari, Opera */
        color: #1c87c9;
      }
      ::-ms-input-placeholder {
        /* Microsoft Edge */
        color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <form action="/form/submit" method="post">
      First name:
      <input type="text" name="firstname" placeholder="John">
      <br>
      <br> Last name:
      <input type="text" name="lastname" placeholder="Lennon">
      <br>
      <br> Email address:
      <input type="email" name="email" placeholder="YourEmail@gmail.com">
      <br/>
      <br/>
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>

日期：2020-06-02 22:14:59 来源：oir作者：oir