覆盖我的元素的默认引导程序css

Question

我是css的新手，我有一个问题（也许是愚蠢的）有一个元素：我有一个文件浏览这个css代码：

@CHARSET "ISO-8859-1";
.file-upload {
  position: relative;
  overflow: hidden;
}
.file-upload input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  font-size: 100px;
  text-align: right;
  filter: alpha(opacity=0);
  opacity: 0;
  background: red;
  cursor: inherit;
  display: block;
}
input[readonly] {
  background-color: white !important;
  cursor: text !important;
}

这是输出：

正如您所看到的输入字段宽度错误，我想在所有单元格中都有此字段。我注意到禁用widht：auto在bootstrap css中有效：

有办法解决我的问题吗？这是我的HTML代码：

<div class="input-group">
    <span class="input-group-btn">
        <span class="btn btn-primary file-upload"> Browse&hellip; 
            <input id="idAcquisition" accept=".dat,.zip" type="file" name="file" data="km"/>
        </span>
    </span> 
    <input id="datName" type="text" class="form-control" readonly="readonly">
</div>

更新：

宽度：100％！重要的是它覆盖bootstrap，但大小是相同的，如果我增加此值，输入字段不响应

Answer 1

你真的有几个选择。

您可以在希望获得优先权的CSS之后添加重要标记。

https://css-tricks.com/when-using-important-is-the-right-choice/

或者您可以使CSS更具体，如下面的CSS。然后，这将覆盖已定义的所有引导程序设置。

https://css-tricks.com/specifics-on-css-specificity/

.input-group .input-group-btn .file-upload input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  width:100%; // You need this to override the bootstrap width
  min-width: 100%;
  min-height: 100%;
  font-size: 100px;
  text-align: right;
  filter: alpha(opacity=0);
  opacity: 0;
  background: red;
  cursor: inherit;
  display: block;
}