Question

我正在使用最新的firefox 30.0。我想在所需字段的占位符之前插入一个红色字体真棒星。我在Chrome中工作没有问题，但我遇到了FF和。

的问题

这是一个说明我的问题的代码 - http://codepen.io/anon/pen/BLibw

我的标记：

<input placeholder="Address" data-required required id="id_street" name="street" type="text" />

我的CSS（sass）：

[data-required] {
    &::-webkit-input-placeholder::before { font-family: fontAwesome; content:'\f005  '; color: $color-red; }
    &::-moz-placeholder::before { font-family: fontAwesome; content:'\f005  '; color: $color-red; } /* firefox 19+ */
    &:-ms-input-placeholder::before { font-family: fontAwesome; content:'\f005  '; color: $color-red; } /* ie */
}

注意：原来IE也给我带来了困难。

感谢您的帮助！

Answer 1

问题不在于占位符，而在于您尝试将::before伪元素应用于input，而不支持跨浏览器，因为它未在标准。请参阅this answer。

因为这显然取决于表单元素为[data-required]（虽然我不清楚为什么除了标准data-required之外还需要required属性），你可能需要在span之后添加一个额外的input元素，并使用兄弟选择器设置该元素的样式，而不是使用伪元素。

Firefox占位符在CSS选择器不工作之前

1 个答案: