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

Chrome支持input[type=text]元素的占位符属性（其他元素可能也支持）。

但以下CSS对占位符的值没有任何作用：

输入[占位符]、[占位符]，*[占位符]{颜色：红色！重要的}<input-type=“text”placeholder=“Value”>

但Value仍将保持灰色而不是红色。

是否有方法更改占位符文本的颜色？

当前回答

不同浏览器中特定元素的占位符颜色。

HTML

<input class='contact' type="email" placeholder="majed@firefly.com">

CSS 

    .contact::-webkit-input-placeholder { /* Chrome/Opera/Safari */
      color: pink;
    }
    .contact::-moz-placeholder { /* Firefox 19+ */
      color: pink;
    }
    .contact:-ms-input-placeholder { /* IE 10+ */
      color: pink;
    }
    .contact:-moz-placeholder { /* Firefox 18- */
      color: pink;
    }

2018-11-19 04:49:19

其他回答

将此CSS代码用于所有浏览器工作：

 ::placeholder{color:#ccc;}

  **HTML**

 <input class="form-control" placeholder="write Here..">

2021-08-16 07:06:08

不同浏览器中特定元素的占位符颜色。

HTML

<input class='contact' type="email" placeholder="majed@firefly.com">

CSS 

    .contact::-webkit-input-placeholder { /* Chrome/Opera/Safari */
      color: pink;
    }
    .contact::-moz-placeholder { /* Firefox 19+ */
      color: pink;
    }
    .contact:-ms-input-placeholder { /* IE 10+ */
      color: pink;
    }
    .contact:-moz-placeholder { /* Firefox 18- */
      color: pink;
    }

2018-11-19 04:49:19

试试这个

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
  color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
  color: pink;
}
:-moz-placeholder { /* Firefox 18- */
  color: pink;
}

2017-10-23 17:59:12

输入：：占位符｛color:red；｝<input-type=“text”placeholder=“value”>

2022-02-27 06:35:12

试试这个吧

input::placeholder 
  color:#900009;
}

2021-01-23 04:01:45

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

推荐文章

最新文章

标签