Radium: Add FAQ about ::-webkit-input-placeholder and friends

[davidebianchi]

[ianobermiller]

Is this a question? You can use the <Style> component to change placeholder colors.

[davidebianchi]

I created the issue by mistake, sorry. Thanks anyway for the answer.

[brendangibson]

    <Style scopeSelector='.myInputs' rules={{
        '::-webkit-input-placeholder': {
            color: placeholderColor
        },
        ':-moz-placeholder': {
            color: placeholderColor
        },
       '::-moz-placeholder': {
            color: placeholderColor
        },
        ':-ms-input-placeholder': {
            color: placeholderColor
        }
    }} />

It would be nice if the vendor prefices could be handled like those of transition.

[RobinMalfait]

@ianobermiller is it possible that this is broken?

<Style scopeSelector='.myInputs' rules={{
        '::-webkit-input-placeholder': {
            color: placeholderColor
        },
        ':-moz-placeholder': {
            color: placeholderColor
        },
       '::-moz-placeholder': {
            color: placeholderColor
        },
        ':-ms-input-placeholder': {
            color: placeholderColor
        }
    }} />

produces

.myInputs ::-webkit-input-placeholder{color: green;}.myInputs :-moz-placeholder{color: green;}.myInputs ::-moz-placeholder{color: green;}.myInputs :-ms-input-placeholder{color: green;}

And it should be

.myInputs::-webkit-input-placeholder{color: green;}.myInputs:-moz-placeholder{color: green;}.myInputs::-moz-placeholder{color: green;}.myInputs:-ms-input-placeholder{color: green;}

[alexlande]

@RobinMalfait yep, see https://github.com/FormidableLabs/radium/issues/712

[RobinMalfait]

@alexlande I wrote a hack for this at the moment:

<Style
    scopeSelector={`.${HEADER_INPUT}::-webkit-input-placeholder`}
     rules={STYLES.inputPlaceholderStyles}
/>

[jbyttow]

Is this considered a complete solution? What about handling auto-prefixing?