黒を作るためにCSSを変更してください

Question

私は自分のページにfileuploadコントロールを持っています。私は偽のbutton.Nowで色を変えたいと思います。ここに私のボタンと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

は、あなたがdiv.fileUpload代わりのinput#fileUploadにstyle="background-color: black"を配置する必要があります。

コード：

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

Answer 2

ブートストラップ・ボタンの変更BG色のuはbackground-image: noneと広告を設定する必要がありますので、background-image: linear-gradient...勾配を有します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>

Answer 3

私は、ボタンの背景色を変更したり、色を合わせるために、ブートストラップボタン（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; 
}