WebkitInputPlaceholder

WebkitInputPlaceholder seems not to work. If i add simple css:

::-webkit-input-placeholder {
   color: red;
}

it works fine, but

WebkitInputPlaceholder: 'red',

not doing it’s job. Anyone has same issue? It’s not very popular CSS attribute, but i need to have it for customization options.

BTW, don’t you think, that react could have cross-browser support for those prefixed css stuff and remove WebkitInput, Moz and ms prefix all together. React let’s not to think about DOM too much, but still i have to think about browser prefixes

[MattKunze]

Radium seems to suggest falling back to creating styles for pseudo-elements, I was curious if they had come up with a solution: https://github.com/FormidableLabs/radium/issues/243

We just ran into something similar with the spinner buttons for numeric input elements. I just added a style fragment as suggested elsewhere (we use webpack so we can just require it), thought it might be nice to keep it entirely within the component.

[waldreiter]

@liesislukas I guess React can’t do anything here. Maybe this works for you:

var css = document.createElement('style');
document.body.appendChild(css);
css.innerHTML = '::-webkit-input-placeholder {color: red;}';