nini nini - 4 months ago 11
CSS Question

Change css to make black

I have fileupload control on my page and I have wrapped it around with fake button.Now I want to change the color of button to black.I tried various way but could not achieve. Here is my button and 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>





Please help.

Answer

For it to work, you have to put style="background-color: black" to div.fileUpload instead of input#fileUpload.

Code:

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

Snippet:

.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>

Comments