How i can change background of file input in bootstrap css file?

Question

How do I change colors from the "file input button"?

This is what I have:

<div class="form-group">
        <label for="exampleInputFile">File input</label>
        <input type="file" id="exampleInputFile">
        <p class="help-block">Example block-level help text here.</p>
</div>

And I tried the code below, but nothing happens:

#input[type=file]{
    background: #000;
}
input{
    background: #000;
}

How do I change the input file type color?

maybe this will help http://geniuscarrier.com/how-to-style-a-html-file-upload-button-in-pure-css/ — Andrew Evt, Dec 01 '15 at 10:29
http://stackoverflow.com/questions/5813344/how-to-customize-input-type-file — Kaushik Maheta, Dec 01 '15 at 10:33
Possible duplicate of [Styling an input type="file" button](http://stackoverflow.com/questions/572768/styling-an-input-type-file-button) — Manoj Salvi, Dec 01 '15 at 10:38
An alternative for who wants to change completely input style of fileupload could be http://markusslima.github.io/bootstrap-filestyle/1.0.6/ — Mahyar Pasarzangene, Apr 25 '18 at 08:16

score 2 · Accepted Answer · answered Dec 01 '15 at 10:48

use this may help you

<div class="form-group">
        <div class="fileUpload btn btn-primary">
        <span>File input</span>
        <input type="file" id="exampleInputFile" class="upload">
        </div>
        <p class="help-block">Example block-level help text here.</p>
</div>

and in style

<style>
.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);
}
</style>

score 0 · Answer 2 · answered Dec 01 '15 at 10:32

You can try like this,

<style type="text/css">
.file-input{
    display:none;
}
.file-lablel{
    background: #d5d5d5;
    border-radius: 5px;
    padding: 5px;
}

<div class="form-group">
    <input type="file" id="exampleInputFile" class="file-input">
    <label for="exampleInputFile" class="file-lablel">File input</label>
    <p class="help-block">Example block-level help text here.</p>
</div>

How i can change background of file input in bootstrap css file?

2 Answers2