CSS Style <input type="file"> tags
Inputs of type="file" are probably the hardest tags to style in html. Due to security issues browsers don’t allow you to change it too much.
If you google for it you’ll find a few tutorials that are hard to understand and use too much javascript, jquery and css.
I found a relatively simple way to achieve this.
1.
Create a text box and a input "type file"
HTML :
<input id="fileName" class="file_input_textbox" readonly />
<div class="file_input_div">
<input type="file" />
</div>
CSS :
.file_input_textbox
{
float: left
}
.file_input_div
{
position: relative;
width: 100px;
height: 23px;
overflow: hidden;
}
2.
oversize the input "type=file"
HTML :
<input type="text" id="fileName" class="file_input_textbox" readonly="readonly">
<div class="file_input_div">
<input type="file" class="file_input_hidden" />
</div>
CSS :
.file_input_hidden
{
font-size: 23px;
position: absolute;
right: 0px;
top: 0px;
opacity: 0;
}
3.
Make the input "type=file" invisible and put your customized button behind it.
HTML :
<input type="text" id="fileName" class="file_input_textbox" readonly="readonly">
<div class="file_input_div">
<input type="button" value="Search files" class="file_input_button" />
<input type="file" class="file_input_hidden" />
</div>
CSS :
.file_input_button
{
width: 100px;
position: absolute;
top: 0px;
background-color: #33BB00;
color: #FFFFFF;
border-style: solid;
}
.file_input_hidden
{
font-size: 45px;
position: absolute;
right: 0px;
top: 0px;
opacity: 0;
filter: alpha(opacity=0);
-ms-filter: "alpha(opacity=0)";
-khtml-opacity: 0;
-moz-opacity: 0;
}
4.
Fill the text box with the name of the selected file
HTML :
<input type="text" id="fileName" class="file_input_textbox" readonly="readonly">
<div class="file_input_div">
<input type="button" value="Search files" class="file_input_button" />
<input type="file" class="file_input_hidden" onchange="javascript: document.getElementById('fileName').value = this.value" />
</div>
Complete Solution:
//css
.file_input_textbox
{
float: left
}
.file_input_div
{
position: relative;
width: 100px;
height: 23px;
overflow: hidden;
}
.file_input_button
{
width: 100px;
position: absolute;
top: 0px;
background-color: #33BB00;
color: #FFFFFF;
border-style: solid;
}
.file_input_hidden
{
font-size: 45px;
position: absolute;
right: 0px;
top: 0px;
opacity: 0;
filter: alpha(opacity=0);
-ms-filter: "alpha(opacity=0)";
-khtml-opacity: 0;
-moz-opacity: 0;
}
//html
<input type="text" id="fileName" class="file_input_textbox" readonly="readonly">
<div class="file_input_div">
<input type="button" value="Search files" class="file_input_button" />
<input type="file" class="file_input_hidden" onchange="javascript: document.getElementById('fileName').value = this.value" />
</div>