如何格式化Opera瀏覽器的輸入占位符文本？

Question

我使用下面的psuedo元素和偽類使用CSS設置了占位符文本。 這可以在所有主流瀏覽器上完成工作，但Opera。 我的理解是Opera不支持樣式占位符文本。 有誰知道一種方式來設置Opera輸入占位符文本的樣式？

CSS

::-webkit-input-placeholder {
    color: red;
    font-size: 10px;
}
::-moz-placeholder {
    color: red;
    font-size: 10px;
}
:-moz-placeholder {
  color: red;
  font-size: 10px;
}
:-ms-input-placeholder {
  color: red;
  font-size: 10px;
}
input:-moz-placeholder {
    color: red;
    font-size: 10px;
}

Answer 1

在Firefox和WebKit中提供樣式占位符的現有方法都是供應商前綴和非標准的，不應在生產中使用。 為了確保面向未來，請使用JavaScript刪除placeholder屬性，並使用表單字段中的value （與類似placeholder的類一起綁定占位符樣式）或其他文本元素來模擬占位符功能。 這將在包括Opera在內的瀏覽器（當前和未來的瀏覽器）中保持一致。

Answer 2

Opera支持占位符文本樣式，從版本22。0。14。71。70（2014年6月17日）開始，因此CSS上面現在可以使用。

Answer 3

您可以像這樣設置占位符的樣式：

::-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;
}

我建議查看此鏈接以檢查瀏覽器兼容性： https ： //caniuse.com/#search=input-placeholder