Firefox Placeholder Before CSS selector not working

Question

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!

Answer 1

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.