How can I styling/customizing the input type file element?

Question

I am using MVC 5 with bootstrap. How can I design the input type file element as shown below image.

.file-uploader .input-group input, .file-uploader .input-group-btn .button {
  height: 35px;
}
.file-uploader .input-group .input-group-addon {
    padding: 2px 15px;
    font-size: 15px;
    font-weight: normal;
    line-height: 1;
    color: #337ab7;
    text-align: center;
    background-color: #fff;
    border: 1px solid #d6d9e2;
    border-radius: 0;
}

<div class="form-group">
                                                        <label for="exampleInputEmail1">Logo image</label>
                                                        <div class="form-group file-uploader">
                                                            <input type="file" name="img[]" class="file">
                                                            <div class="input-group col-xs-12">
                                                                <span class="input-group-addon"><i class="glyphicon glyphicon-picture"></i></span>
                                                                <input type="text" class="form-control input-lg" disabled placeholder="Upload Image">
                                                                <span class="input-group-btn">
                                                                    <button class="browse btn btn-primary" type="button"><i class="glyphicon glyphicon-search"></i>Browse</button> 
                                                                </span>
                                                            </div>
                                                        </div>
                                                    </div>

Please help me...

Possible duplicate of [Styling an input type="file" button](http://stackoverflow.com/questions/572768/styling-an-input-type-file-button) — Peter B, Feb 15 '17 at 08:38
I use [JQuery filestyle](http://markusslima.github.io/jquery-filestyle/). — apokryfos, Feb 15 '17 at 08:39

Ravindra Singh · Accepted Answer · 2017-02-15T09:13:26.223

.file-uploader .input-group input,
.file-uploader .input-group-btn .button {
  height: 35px;
}
.file-uploader .input-group .input-group-addon {
  padding: 2px 15px;
  font-size: 15px;
  font-weight: normal;
  line-height: 1;
  color: #337ab7;
  text-align: center;
  background-color: #fff;
  border: 1px solid #d6d9e2;
  border-radius: 0;
}
.file
{
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  width:100%;
  height:100%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="form-group">
  <label for="exampleInputEmail1">IMG</label>
  <div class="form-group file-uploader">
    
    <div class="input-group col-xs-12">
      <span class="input-group-addon"><i class="glyphicon glyphicon-picture"></i></span>
      <input type="text" class="form-control input-lg" disabled placeholder="Upload Image">
      <span class="input-group-btn">
                                                                    <div class="browse btn btn-primary"><i class="glyphicon glyphicon-search"></i> Browse<input type="file" name="img[]" class="file"></div> 
                                                                </span>
    </div>
  </div>
</div>

I hope this will help you :) Let me know if i didn't do correctly. — Ravindra Singh, Feb 15 '17 at 08:52
Sir, this occurred error : Elements 'input' cannot be nested inside element 'button' — AbhiJA, Feb 15 '17 at 09:04
Thanks sir! Its working. and I can bind the file type value to textbox with the help of @Pawel answer. — AbhiJA, Feb 15 '17 at 09:39

score 1 · Answer 2 · answered Feb 15 '17 at 09:20

I used a couple of lines of JS to make the effect better. try it out.

var button = document.getElementById('search');
var file = document.getElementById('hideFile');
var output = document.getElementById('output');

button.addEventListener('click',function(){
  file.click();
});

file.addEventListener('change',function(event){
  var f = event.target.files;
  if(!f.length) {
    output.innerHTML = "Upload Image";
    output.title = "";
    return;
  } else {
    output.innerHTML = "";    
    }
  var fileList = "";
  for(var i=0;i<f.length;i++){
    fileList += f[i].name;
    if(i<f.length-1) fileList += ", ";
  }
  output.innerHTML = fileList;
  output.title = fileList;
});

#search{
  border: solid 0px #33aaff;
  margin:10px;
  outline:0;
  background-color:transparent;
  display:block;
  height:30px;
  padding:0px;
}
#hideFile{
  display:none !important;
}

#search *{
  float:left;
  display:block;
  height:100%;
  border: solid 1px #cccccc;
  line-height:28px !important;
  top:0px !important;
  padding: 0 15px;
  vertical-align:middle !important;
}

#search span:nth-child(1){
  color:#4371B3 !important;
  
}
#search span:nth-child(2){
  width:200px;
  background-color:#eee;
  color:#aaa;
  white-space:nowrap;
  overflow:hidden;
}
#search span:nth-child(3){
  background-color:#4371B3;
  color:white !important;
  border-radius:0 6px 6px 0;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<button id="search">
  <span class="glyphicon glyphicon-picture"></span>
  <span id="output">Upload Image</span>
  <span class="glyphicon glyphicon-search">Browse</span>
  <input id="hideFile" type="file" multiple/>
</button>

Thank you Sir! Its working, I can bind the file type value inside textbox by your answer. :) — AbhiJA, Feb 15 '17 at 09:40

How can I styling/customizing the input type file element?

2 Answers2