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

Question

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

这是一个说明我的问题的codepen - 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伪元素应用于a input,而不支持跨浏览器,因为它未在标准中定义.看到这个答案.

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