javascript - 改变css使黑色

Question

我的页面上有文件上传控件，我用假按钮将它包裹起来。现在我想将按钮的颜色更改为黑色。我尝试了各种方法但无法实现。这是我的按钮和 CSS:

.fileUpload {
  position: relative;
  overflow: hidden;
  margin: 10px;
}
.fileUpload input.upload {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  padding: 0;
  font-size: 20px;
  cursor: pointer;
  opacity: 0;
  filter: alpha(opacity=0);
}

<div class="col-xs-4">
  <div class="fileUpload btn btn-primary">
    <span>Browse</span>
    <input type="file" name="File" id="fileUpload" class="upload" style="background-color: black" />
  </div>
</div>

请帮忙。

Answer 1

要使其正常工作，您必须将 style="background-color: black" 放入 div.fileUpload 而不是 input#fileUpload。

代码:

<div class="col-xs-4">
    <div class="fileUpload btn btn-primary" style="background-color: black">
        <span>Browse</span>
        <input type="file" name="File" id="fileUpload" class="upload"/>
    </div>
</div>

片段:

.fileUpload {
  position: relative;
  overflow: hidden;
  margin: 10px;
}

.fileUpload input.upload {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  padding: 0;
  font-size: 20px;
  cursor: pointer;
  opacity: 0;
  filter: alpha(opacity=0);
}

<link media="all" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<div class="col-xs-4">
  <div class="fileUpload btn btn-primary" style="background-color: black;border:0;">
    <span>Browse</span>
    <input type="file" name="File" id="fileUpload" class="upload" />
  </div>
</div>