Question

我想在占位符后放一颗红星。 Chrome和Safari都可以，但在Firefox上不起作用。我做的是

input::-webkit-input-placeholder:after {  content: "*";
    color: red; }
input::-moz-placeholder:after {  content: "*";
    color: red; }
input:-ms-input-placeholder:after {  content: "*";
    color: red; }

CSS中的

和

<div class="form-group">
    <input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="Email" >
</div>

HTML中的

。为什么在FIrefox中Email之后没有任何内容。

Answer 1

问题是:: after pseudo仅适用于Chrome中的-input-placeholder（或-placeholder）。注意这个小提琴，

input::-moz-placeholder {
    color: red;
}

input:-ms-input-placeholder {
    color: red;
}

分别在Firefox和IE中工作，但不是

input::-moz-placeholder:after {
    content: "*";
    color: red;
}

或

input:-ms-input-placeholder:after {
    content: "*";
    color: red;
}

jsFiddle

Answer 2

你给出的小提琴示例有：

::-webkit-input-placeholder:after {
    content: "*";
    color: red;
}

您在::？

之前输入了

为什么我在浏览器Firefox中占位符后没有红星？

2 个答案: