CSS Style input type="file" tags

by Sanju 2010-08-16 16:34:31

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>

Tagged in:

12963
like
1
dislike
0
mail
flag

You must LOGIN to add comments