在reactjs中设置文本输入占位符颜色

Question

在使用普通CSS时，如果您要为占位符设置样式，请使用以下css选择器：

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

但是我不知道如何在响应内联样式中应用这些类型的样式。

Answer 1

简单地给你的“input”标签一个“id”或一个“class”并将你的css样式放在app.css中的src中。例如

//App.css or external stylesheet

#inputID::placeholder {
    color: #ff0000;
    opacity: 1;
}

//your jsx code
<input type="text" id="inputID" placeholder="Your text here" />

这实际上对我有用。

Answer 2

你不能使用::-webkit-inline-placeholder内联。

它是一个伪元素（很像 eg :hover）只能在你的样式表中使用：

非标准专有::-webkit-input-placeholder伪元素表示表单元素的占位符文本。

来源

相反，通过className属性为 React 组件分配一个类，并将样式应用到这个类。

Answer 3

你可以尝试使用镭

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

@Radium
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 (
      <button
        style={[
          styles.base,
          styles[this.props.kind]
        ]}>
        {this.props.children}
      </button>
    );
  }
}

// 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'
  }
};