更改css使黑色

我有我的網頁上的文件上傳控制，我用假按鈕包裹它。現在我想改變按鈕的顏色爲黑色。我嘗試了各種方式，但無法實現。這是我的按鈕和CSS：更改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>

請幫助。

來源

2016-07-20 nini

對於它的工作，你必須把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>

來源

2016-07-20 17:27:20

是的它確實工作！謝謝！ – nini

看起來我現在無法接受答案。 – nini

很高興我能幫到你。是的，你需要幾分鐘才能接受。 –

引導按鈕具有梯度background-image: linear-gradient...因爲更改背景顏色ü必須設置background-image: none和廣告d標籤名稱獲得比引導樣式更高的優先級，比添加background-color，對不起我的英文不好。

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>

來源

2016-07-20 18:05:32

我可以看到你正在使用引導按鈕（btn btn-primary），以改變按鈕的背景顏色或懸停顏色。您可以右鍵單擊該按鈕，然後在瀏覽器中檢查元素。看看你會意識到引導檢查員有一些風格的按鈕，如下類別：

覆蓋這在您的自定義CSS樣式的引導按鈕的背景顏色

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

覆蓋這一類風格的引導哈弗按鈕屬性

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

來源

2016-07-20 18:09:20

更改css使黑色

回答

相關問題