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

Question

我正在尝试在所需输入的占位符前添加一个星号。我使用的是 input::-moz-placeholder:before，我在这个 Whosebug 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 之外的所有浏览器。我无法更改 HTML，尽管我可以使用 Javascript。但是，我更喜欢用 scss 来做这件事。

Answer 1

这确实很奇怪。我还没有找到任何原因说明为什么占位符 css 支持已从 Firefox 中删除 - 这也适用于 Developer Edition。所以如果你对 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

上举了一个例子

希望对您有所帮助

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

Adding asterisk to placeholder in Firefox, -moz-placeholder::before no longer works

css

firefox

cross-browser

placeholder