Anmol Sarraf:
私が使用しているので、入力グループのコンポーネントからMDBootstrapを。
MDブートストラップ内の入力フィールド・コンポーネントのブランクの色を変更するための周りに方法がある場合、私は思っていました。現時点でのように、それは(フォーカスなし)次のようになります。
私は、この入力フィールドをクリックすると、それは(焦点を当てて、入力フィールドを空白の色が緑色に変わります)次のようになります。
次のように、このコンポーネントのコードは次のとおりです。
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-lg">Name</span>
</div>
<input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm">
</div>
我々はそれをクリックしたときに黒の代わりの緑に入力フィールドを空白の色を変更するための方法の周りがあります場合、私は思っていました。ありがとう!
keikai :
セットbackgroundImageのを持つスタイル<input />
です作業
で、テキスト、それを試してみてください。
const style = {
backgroundImage: `linear-gradient(0deg, black 2px, rgba(0, 150, 136, 0) 0),
linear-gradient(0deg, rgba(0, 0, 0, 0.26) 1px, transparent 0)`
};
const App = () => {
return (
<div className="App">
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-lg">
Large
</span>
</div>
<input
type="text"
class="form-control"
aria-label="Large"
style={style}
aria-describedby="inputGroup-sizing-sm"
/>
</div>
</div>
);
};
ReactDOM.render(<App />, document.getElementById("root"));
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>
<link
rel="stylesheet"
href="https://unpkg.com/[email protected]/dist/css/bootstrap-material-design.min.css"
integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX"
crossorigin="anonymous"
/>
それを達成するためのステップ:
ブラウザでスタイルをチェックすると、
あなたは、アニメーションでその色を見つけ、それをコピーして、その色を変更し、それはそれだでしょう。