我试图让一些 css 属性出现在我的表单中,但是当我将这些属性移动到父 html 元素时它不起作用。
直接应用于 .input
类的 CSS 属性起作用,但是当应用于父类 .form-control
时它们不起作用并且似乎不影响input 和 .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>
最佳答案
从您提供的代码片段来看,这是因为您将规则直接应用于表单而不是表单输入。输入不会继承您在表单上设置的属性。您需要像在注释掉的代码中那样专门针对输入。
关于CSS 属性未出现在文本输入中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44263094/