Question

我试图在所需输入的占位符之前添加星号。我正在使用input::-moz-placeholder:before我在StackOverflow post找到的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; } }，这是我上次在1月份检查时的工作。但是，似乎不再支持它。这是我的目标：

{{1}}

这适用于除Firefox和IE10之外的所有浏览器。虽然我可以使用Javascript，但我无法改变HTML。但是，我更喜欢用scss这样做。

Answer 1

确实很奇怪。我还没有发现为什么从Firefox中删除了占位符css支持的原因 - 这也适用于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不再有效

1 个答案: