html - 为我的元素覆盖默认的 Bootstrap 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;
}

这是输出:

如您所见，输入字段的宽度不正确，我希望所有单元格中都有此字段。我注意到在 bootstrap css 中禁用 widht:auto 是有效的:

有办法解决我的问题吗？这是我的 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。这将覆盖所有已定义的 Bootstrap 设置。

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;
}