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

Posted 2023-03-05

【中文标题】在 Firefox 中为占位符添加星号，-moz-placeholder::before 不再有效

【英文标题】：Adding asterisk to placeholder in Firefox, -moz-placeholder::before no longer works

【发布时间】：2015-04-10 20:01:47

【问题描述】：

我正在尝试在所需输入的占位符之前添加一个星号。我使用的是input::-moz-placeholder:before，我在这个*** 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 代替？

【参考方案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 上做了一个例子

希望对你有帮助