What are some ways to customize the appearance of the file input element?

Question

What are some ways to customize the appearance of the file input element?

I am currently working with MVC 5 and bootstrap. Can someone assist me in customizing the input type file element to match the design shown in the image below?

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

Seeking assistance from experienced developers...

css html twitter-bootstrap

Answer 1

Answer №1

.upload-section .input-group input,
.file-uploader .input-group-btn .button {
  height: 35px;
}
.upload-section .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;
}
.image-upload
{
  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">Profile Picture</label>
  <div class="form-group upload-section">
    
    <div class="input-group col-xs-12">
      <span class="input-group-addon"><i class="glyphicon glyphicon-camera"></i></span>
      <input type="text" class="form-control input-lg" disabled placeholder="Choose Image">
      <span class="input-group-btn">
        <div class="browse btn btn-primary"><i class="glyphicon glyphicon-folder-open"></i> Browse<input type="file" name="image[]" class="image-upload"></div> 
      </span>
    </div>
  </div>
</div>

Answer 2

.upload-section .input-group input,
.file-uploader .input-group-btn .button {
  height: 35px;
}
.upload-section .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;
}
.image-upload
{
  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">Profile Picture</label>
  <div class="form-group upload-section">
    
    <div class="input-group col-xs-12">
      <span class="input-group-addon"><i class="glyphicon glyphicon-camera"></i></span>
      <input type="text" class="form-control input-lg" disabled placeholder="Choose Image">
      <span class="input-group-btn">
        <div class="browse btn btn-primary"><i class="glyphicon glyphicon-folder-open"></i> Browse<input type="file" name="image[]" class="image-upload"></div> 
      </span>
    </div>
  </div>
</div>

Answer 3

Answer №2

I implemented a few lines of JavaScript code to enhance the effect. Give it a try.

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>

Answer 4

I implemented a few lines of JavaScript code to enhance the effect. Give it a try.

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>

What are some ways to customize the appearance of the file input element?

Answer №1

Answer №2

Similar questions

Hold off on showing the image until it has finished loading

Hide programmer's comments from public view using personalized PHP scripts

Guide on showcasing MYSQL table columns in an arranged CSS block layout!

Leverage the power of JavaScript by combining it with the .on and .editableselect methods

What are the essential files needed in Kendo UI Core for a mobile app?

It is impossible to add a new element between two existing elements that share the same parent

Is there a way to integrate the distanceTo function from Leaflet into my own custom library that I am planning to develop?

The Three.js IEWebGL Plugin

Is there a way to modify the color scheme of my webpage while utilizing Bootstrap?

Angular 5 mobile row aligns vertically, not inline with Bootstrap

Seeking an efficient localStorage method for easy table modification (HTML page provided)

CSS failed to load on HTML page

Updating a section of a webpage using jQuery Mobile

Tips for maintaining a single-line div while adding ellipses:

if the total is less than 12, the column will expand to its full width

CSS for positioning tabs by sliding

What is the correct way to retrieve a JSON object instead of getting [Object object]?

What is the process for connecting the Facebook icon in Bootstrap 4 to my personal Facebook account, or the Google Mail icon to my Google Mail account?

What is the best way to achieve maximum clarity in a div element while adjusting opacity?

I have an HTML page containing a form that I would like to save to a file, in order to utilize the file's content within my application