Bootstrap doesn’t have a designated component for a file upload button. In IE you will face cross browser issues, To avoiding cross browser issues i have found a solution. A simple and elegant solution using only HTML and CSS can be achieved with the following sample code,
Before write your html code you need to add required jQuery and bootstrap files in your <head> section.
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Here is your HTML Code,
For ( IE 9+ )
For this you can use this Modern Approach. Let's start by keep a button inside a <label>, adding the appropriate button classes to style it as we need,
<label class="btn btn-default btn-choose-file">
Choose file from your PC <input type="file" style="display: none;">
</label>
Before write your html code you need to add required jQuery and bootstrap files in your <head> section.
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Here is your HTML Code,
For ( IE 9+ )
For this you can use this Modern Approach. Let's start by keep a button inside a <label>, adding the appropriate button classes to style it as we need,
<label class="btn btn-default btn-choose-file">
Choose file from your PC <input type="file" style="display: none;">
</label>
For ( IE 8 and its below)
For this you can use this legacy approach. If you need support for old IE (below 8), Instead of a <label>, Keep your button in a <span>:
<span class="btn btn-default btn-choose-file">
Choose file from your PC <input type="file">
</span>
For this you can use this legacy approach. If you need support for old IE (below 8), Instead of a <label>, Keep your button in a <span>:
<span class="btn btn-default btn-choose-file">
Choose file from your PC <input type="file">
</span>
And then apply the following CSS. you can use this CSS code for both methods.
.btn-choose-file {
position: relative;
overflow: hidden;
}
.btn-choose-file input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
font-size: 20px;
text-align: right;
filter: alpha(opacity=0);
opacity: 0;
outline: none;
background: #DF474B
color:#ffffff;
cursor: inherit;
display: block;
}
I hope you like this article very much & Please don't forget to share.
Thankyou.
position: relative;
overflow: hidden;
}
.btn-choose-file input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
font-size: 20px;
text-align: right;
filter: alpha(opacity=0);
opacity: 0;
outline: none;
background: #DF474B
color:#ffffff;
cursor: inherit;
display: block;
}
I hope you like this article very much & Please don't forget to share.
Thankyou.
0 comments:
Post a Comment