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>

Answer 2

将输入选择器更改为input:not([type=file])

input:not([type=file])选择所有输入元素，但输入类型属性 ='file'

#msform input:not([type=file]), #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;
}

Answer 3

如果我理解正确，那么您可以使用输入文件元素

上的某些样式来修复它

#msform input[type="file"] {
    width: auto;
    padding: 0;
    border: none;
    height: auto;
}

小提琴 http://jsfiddle.net/pa9r9pzj/

Answer 4

请尝试以下操作： Demo

仅为您需要的元素指定样式而不是一般情况下，在您的代码中，样式将应用于所有输入类型，如文本框，提交，密码等。所以最好具体，对于文件类型，你可以使用input[type=file]

#msform input[type=text],#msform input[type=password], #msform textarea {
    ...
    ...
}

而不是

#msform input, #msform textarea {   .....   }

Answer 5

尝试使用eclipse -clean选择器：

:not

它将排除#msform input:not([type=file]){ .... }

的css规则

http://jsfiddle.net/kg48vpfq/3/

Answer 6

有几种方法可以达到你想要的效果。

您可以更改输入中的css定义，使其不适用于输入文件

或者您可以像这样添加一个类输入文件

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

并禁用此类输入的边框

#msform input.no_border {
    border: none
}

如何重置输入元素样式

6 个答案: