でテキスト入力プレースホルダの色を通常のCSSを使用して、あなたのプレースホルダのスタイルにしたい場合は、これらのCSSセレクタを使用します。設定reactjs
::-webkit-input-placeholder {
color: red;
}
しかし、私はのスタイルのこれらのタイプを適用する方法を見つけ出すことはできませんインラインスタイルに反応します。
でテキスト入力プレースホルダの色を通常のCSSを使用して、あなたのプレースホルダのスタイルにしたい場合は、これらのCSSセレクタを使用します。設定reactjs
::-webkit-input-placeholder {
color: red;
}
しかし、私はのスタイルのこれらのタイプを適用する方法を見つけ出すことはできませんインラインスタイルに反応します。
あなたは私にとってradium
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'
}
};
::-webkit-inline-placeholder
をインラインで使用することはできません。
それは(はるか例えば:hover
等)スタイルシートのみを使用することができることを擬似要素である:
非標準の独自
::-webkit-input-placeholder
擬似要素は、form要素のプレースホルダテキストを表します。
代わりに、className
プロパティを介して反応させコンポーネントにクラスを割り当て、このクラスにスタイルを適用します。
を使用しようとすることができ、私はRadium's Style componentを使用しています。 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)
これは私のためには機能しません。 btw、 ':: - webkit-input-placeholder'' jsonオブジェクトに': 'がありません – yonasstephen