html - 如何重置输入元素样式

Question

我有一个表格，其中有:

<input type="file" size="6" />

不幸的是，该按钮将显示在输入栏中! 这是因为我已经为表单中的所有输入设置了一个 css:

#msform input, #msform textarea {

    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 2px;
    margin-bottom: 10px;
    width: 80%;
    height: 29px;


    box-sizing: border-box;
    font-family: montserrat;
    color: #2C3E50;

    font-size: 12px;
}

请看:http://jsfiddle.net/kg48vpfq/ 我怎样才能只清除这个输入元素的 css，或者我怎样才能更好地获得按钮旁边的输入框。

谢谢

Answer 1

将 height: auto 添加到 file input。在 input 和 textarea 的通用样式之后添加它。

#fieldset2 input[type="file"] {
    height: auto;
    border: 0;
}

Demo

#msform fieldset:not(:first-of-type) {
  display: none;
}
#msform label {
  width: 20%;
  float: left;
  margin-top: 10px;
}
/*inputs*/

#msform input,
#msform textarea {
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 2px;
  margin-bottom: 10px;
  width: 80%;
  height: 29px;
  box-sizing: border-box;
  font-family: montserrat;
  color: #2C3E50;
  font-size: 12px;
}
#msform textarea {
  min-height: 100px;
  margin-left: 50px;
}
#fieldset2 input[type="file"] {
  height: auto;
  border: 0;
}

<form id="msform">
  <fieldset id="fieldset2">
    <input type="file" size="6" />
  </fieldset>
</form>