Firefox Placeholder在CSS选择器不工作之前 [英] Firefox Placeholder Before CSS selector not working

问题描述

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

有问题。

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

我的标记：

 < input placeholder =Addressdata-required required id =id_streetname =streettype =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给我一个硬

感谢您的帮助！

解决方案

不是占位符，而是您尝试将 :: before 伪元素应用于输入的事实，它不支持跨浏览器，因为它没有在标准中定义。请参见此答案。

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

I'm using the latest firefox 30.0. I'm trying to insert a red font awesome star before the placeholder of required fields. I got this working in Chrome no problem but I'm having issues with FF and.

Here's a codepen illustrating my issue - http://codepen.io/anon/pen/BLibw

My markup:

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

My 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 */
}

Note: Turns out IE is giving me a hard time too.

Thanks for your help!

解决方案

The issue is not with the placeholder, but the fact that you are trying to apply a ::before pseudo-element to an input, which isn't supported cross-browser because it's not defined within the standards. See this answer.

Since this obviously depends on the form element being [data-required] (although it's not clear to me why you need a data-required attribute in addition to the standard required), you may need to add an extra span element after the input and style that element using a sibling selector, rather than using a pseudo-element.

这篇关于Firefox Placeholder在CSS选择器不工作之前的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！