CODEWITHSUNDEEP
javascriptjquerycss
nini
nini

Reputation: 3

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.

Upvotes: 0

Views: 84

Answers (3)

Frank Odoom
Frank Odoom

Reputation: 1566

I can see you are using Bootstrap buttons (btn btn-primary), in order to change the button background color or hover color. You can right click the button then go to inspect element in your browser. Look in the inspector you will realize bootstrap has some classes that style the button as follows:

Overwrite this in your custom css to style the Bootstrap Button Background Colour

.btn-primary {
    color: #fff;
    background-color: #000;
    border-color: #2e6da4;
}

Overwrite this class to style the Bootstrap Hover Button Attributes

.btn:hover, .btn:focus, .btn.focus {
    color: #333;
    text-decoration: none;
}

Upvotes: 1

Angel Politis
Angel Politis

Reputation: 11313

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>

Upvotes: 2

Ivan Karaman
Ivan Karaman

Reputation: 1234

bootstrap buttons has gradient background-image: linear-gradient... because for changes bg color u must set background-image: none and add tag name to get a higher priority than bootstrap styles, than add background-color, sorry for my bad english.

div.fileUpload {
  position: relative;
  overflow: hidden;
  margin: 10px;
  background-color: black;
  background-image: none;
}
.fileUpload input.upload {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  padding: 0;
  font-size: 20px;
  cursor: pointer;
  opacity: 0;
  filter: alpha(opacity=0);
}
<!-- Свіжа збірка мінімізованих CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

<!-- Додаткові теми -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<div class="col-xs-4">
  <div class="fileUpload btn btn-primary">
    <span>Browse</span>
    <input type="file" name="File" id="fileUpload" class="upload"/>
  </div>
</div>

Upvotes: 1

Related Questions