Mohammad Razeghi Mohammad Razeghi - 1 year ago 329
React JSX Question

Set text input placeholder color in reactjs

When using ordinary CSS if you want to style your place holder you use these css selectors :

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

But I can't figure out how to apply these type of styles in react inline styles.

Answer Source

You could try to use radium

var Radium = require('radium');
var React = require('react');
var color = require('color');

class Button extends React.Component {
  static propTypes = {
    kind: React.PropTypes.oneOf(['primary', 'warning']).isRequired

  render() {
    // Radium extends the style attribute to accept an array. It will merge
    // the styles in order. We use this feature here to apply the primary
    // or warning styles depending on the value of the `kind` prop. Since its
    // all just JavaScript, you can use whatever logic you want to decide which
    // styles are applied (props, state, context, etc).
    return (

// You can create your style objects dynamically or share them for
// every instance of the component.
var styles = {
  base: {
    color: '#fff',

    // Adding interactive state couldn't be easier! Add a special key to your
    // style object (:hover, :focus, :active, or @media) with the additional rules.
    ':hover': {
      background: color('#0074d9').lighten(0.2).hexString()
    '::-webkit-input-placeholder' {
        color: red;

  primary: {
    background: '#0074D9'

  warning: {
    background: '#FF4136'