web-dev-qa-db-ja.com

reactjsでテキスト入力プレースホルダーの色を設定する

通常のCSSを使用する場合、プレースホルダーのスタイルを設定する場合は、次のcssセレクターを使用します。

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

しかし、これらのタイプのスタイルをreactインラインスタイルに適用する方法がわかりません。

reactjsstylesplaceholder
6
Mohammad Razeghi

あなたは使用を試みることができます ラジウム

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'
  }
};
2
Sergio Flores

::-webkit-inline-placeholderをインラインで使用することはできません。

これは疑似要素であり（たとえば、:hoverのように）、スタイルシートでのみ使用できます。

非標準の独自仕様の::-webkit-input-placeholder疑似要素は、フォーム要素のプレースホルダーテキストを表します。

ソース

代わりに、classNameプロパティを介してReact component）にクラスを割り当て、スタイルをに適用しますこのクラス。

4
Timo

1つのプレースホルダーに::-webkit-inline-placeholderinlineとRadiumを使用しないでください。

Index.cssにアクセスすることをお勧めします

input.yourclassname::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: white;
  opacity: 1; /* Firefox */
}
2
noe

「input」タグに「id」または「class」を付けて、src内のApp.cssにcssスタイルを配置するだけです。例えば

//App.css or external stylesheet

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

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

それは実際に私のために働いた。

1
Olawale Oladiran

私の場合、 ラジウムのスタイルコンポーネント を使用します。 ES6構文でできることは次のとおりです。

import React, { Component } from 'react'
import Radium, { Style } from 'radium'

class Form extends Component {
   render() {
      return (<div>
         <Style scopeSelector='.myClass' rules={{
            '::-webkit-input-placeholder': {
               color: '#929498'
            }}} />
         <input className='myClass' type='text' placeholder='type here' />
      </div>
   }
}

export default Radium(Form)
0
yonasstephen