Ändern css zu schwarz

Question

Ich habe Fileupload-Steuerelement auf meiner Seite und ich habe es mit gefälschten Schaltfläche umwickelt.Jetzt möchte ich die Farbe der Schaltfläche zu schwarz ändern.Ich habe versucht, verschiedene Möglichkeiten, aber nicht erreichen konnte. Hier ist meine Schaltfläche und 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>

Bitte helfen.

Answer 1

Denn es, Sie arbeiten müssen style="background-color: black" zu div.fileUpload statt input#fileUpload setzen.

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>

Answer 2

Bootstrap-Tasten hat Steigung background-image: linear-gradient... weil für Änderungen Farbe bg u background-image: none und Anzeige einstellen müssen d Tag-Name , um eine höhere Priorität als Bootstrap-Stile zu erhalten, als background-color hinzufügen, Entschuldigung für mein schlechtes Englisch.

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>

Answer 3

kann ich sehen Sie Bootstrap-Tasten (btn btn-primary) verwenden, um auf die Schaltfläche Hintergrundfarbe oder schweben Farbe zu ändern. Sie können mit der rechten Maustaste auf die Schaltfläche klicken und dann Element in Ihrem Browser überprüfen. Schauen Sie in der Inspektor Sie Bootstrap realisieren wird hat einige Klassen, die Art der Taste wie folgt:

diese CSS in Ihrer benutzerdefinierten Überschreiben Sie den Bootstrap-Knopf Hintergrundfarbe

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

Überschreiben Sie diese Klasse, um Stil der Bootstrap Hover stylen Button Attribute

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