覆蓋我的元素的默認引導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％！ 重要的是它會覆蓋引導程序，但大小是相同的，如果我增加此值，則輸入字段無響應

Answer 1

您確實有一些選擇。

您可以在想要成為CSS的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;
}