CSSのプロパティがテキスト入力に表示されない

Question

私のフォームにいくつかのCSSプロパティを表示しようとしていますが、プロパティを親のhtml要素に移動すると機能しません。 CSSのプロパティは.inputクラスの仕事に直接適用されますが、親の.form-controlクラスに適用された場合、機能しないため、入力に影響を与えないように見え、.form-controlのプロパティはChromeのツールに表示されません入力要素？コードから

.form-control { 
 
    display: inline-block; 
 
    height: 34px; 
 
    width: 100%; 
 
    margin: 10px; 
 
    border-radius: 4px; 
 
    border: 1px solid #ccc; 
 
} 
 

 

 
/*.form-control .input {*/ 
 
/*height: 34px;*/ 
 
/*width: 100%;*/ 
 
/*margin: 10px;*/ 
 
/*border-radius: 4px;*/ 
 
/*border: 1px solid #ccc;*/ 
 
/*}*/ 
 

 
.form-control .button { 
 
    display: block; 
 
    background-color: limegreen; 
 
    font-size: 14px; 
 
    font-weight: 400; 
 
    color: white; 
 
    margin: auto; 
 
    vertical-align: middle; 
 
    padding: 6px 12px; 
 
    border: 1px solid transparent; 
 
    height: 25px; 
 
    border-radius: 4px; 
 
}

<form className="form-control"> 
 
    <input className="input" type="text" /> 
 
    <button className="button">Get Weather</button> 
 
</form>

Answer 1

あなたは、フォームではなくフォーム入力に直接ルールを適用しているからだと、提供スニペット。入力はフォームに設定しているプロパティを継承しません。コメントアウトされたコードのように、入力を具体的にターゲットにする必要があります。