Question

我正在尝试在我的表单中显示一些css属性，但是当我将属性移动到父html元素时它不起作用。直接应用于.input类的CSS属性有效，但是当应用于父.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

从您提供的代码段中，这是因为您将规则直接应用于表单而不是表单输入。输入不会继承您在表单上设置的属性。您需要在注释掉的代码中专门定位输入。

CSS属性不出现在文本输入上

1 个答案: