I've been attempting to apply certain CSS properties to my forms, but for some reason, they're not taking effect when I move the properties to the parent HTML element.
Although the CSS properties added directly to the .input class are working as expected, those applied to the parent .form-control class don't seem to have any impact on the input field. Additionally, none of the .form-control properties show up in Chrome dev tools when inspecting the text input element.
.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>