在 Firefox 中为占位符添加星号，-moz-placeholder::before 不再有效答案

【问题标题】：Adding asterisk to placeholder in Firefox, -moz-placeholder::before no longer works在 Firefox 中为占位符添加星号，-moz-placeholder::before 不再有效
【发布时间】：2015-04-10 20:01:47
【问题描述】：

我正在尝试在所需输入的占位符之前添加一个星号。我使用的是input::-moz-placeholder:before，我在这个StackOverflow post 上找到了它，它在我最后一次检查时是在1 月份工作的。但是，它似乎不再受支持。这就是我要做的：

div.interactFieldRequired {
    input::-webkit-input-placeholder:before {
        content:'* ';
        color: $error-color;
    }
    input:-moz-placeholder:before  {
        content:'* ';
        color: $error-color;
    }
    input::-moz-placeholder:before  {
        content:'* ';
        color: $error-color;
    }
    input:-ms-input-placeholder:before  {
        content:'* ';
        color: $error-color;
    }
    input::-moz-selection:before  {
        content:'* ';
        color: $error-color;
    }
    input[type="text"]:before  {
        content:'* ';
        color: $error-color;
    }
}

这适用于除 Firefox 和 IE10 之外的所有浏览器。尽管我可以使用 Javascript，但我无法更改 HTML。但是，我更喜欢用 scss 来做这件事。

【问题讨论】：

也许是一个 HTML 实体或 unicode 代替？

标签： css firefox cross-browser placeholder

【解决方案1】：

这确实很奇怪。我还没有找到从 Firefox 中删除占位符 css 支持的任何原因——这也适用于开发人员版。因此，如果您对 JS 没问题，您可以利用 JavaScript document.getElementsByTagName() 方法并循环遍历此列表并将每个输入的占位符 concat() 到星号，如下所示：

var asterisk = "* ",
    inputList = document.getElementsByTagName("input");

for(i=0; i < inputList.length; i++) {
     inputList[i].placeholder = asterisk.concat(inputList[i].placeholder);
}

它在浏览器中得到了广泛的支持。我在jsfiddle 上做了一个例子

希望对你有帮助

【讨论】：