How do you style file input elements?

[justinOrel]

Simple question: How do you style file input elements in forms with anything resembling consistency when display across browsers varies so greatly? I'm particularly thinking of Chrome, which replaces the usual empty-box/browse-button element with a single "choose file" button. Do you simply reconcile yourself to the elements looking totally different in different browsers and work around the spatial disparities in the layout?

[lilly1236]

Form controls do tend to vary quite a lot between the browsers and aren't the easiest thing to style so I wouldn't worry too much about the 'file select' control differences. http://www.xhtmlcoder.com/

[netshet]

Remember that very few people apart from you will ever look at your site in multiple browsers (unless it doesn't work in the first one they try), so getting the site to look exactly the same in all of them is not necessary - what matters is that it looks right, particularly given the base browser interface, and that can accommodate differently styled form controls.

As Robert said, it's very difficult to get all form controls to look the same across all browsers – you're better off not trying, because all that's likely to happen is that you'll mess some of them up!

[sofia20]

This is a good question. Try this here

[kiruthika]

function changeInputs()

{

var els = document.getElementsByTagName('input');

var elsLen = els.length;

var i = 0;

for ( i=0;i<elsLen;i++ )

{

if ( els[i].getAttribute('type') )

{

if ( els[i].getAttribute('type') == "text" )

els[i].className = 'text';

else

els[i].className = 'button';

}

}

}

This a program by which you can style your file elements.

[landmarvel]

Nice question. i want to know ans this question.

land marvel chennai

[displaybanner]

The <input> tag is used to select user information.

<input> elements are used within a <form> element to declare input controls that allow users to input data.

An input field can vary in many ways, depending on the type attribute.

[wnsgdfskgn]

Really Very nice information’s you are sharing. It was very useful for me.
__________________________________________
Claims Adjusters

[wnsgdfskgn]

Good post. You did a good work,and offer more effective imformation for us! Thank you.
__________________________
mixed martial arts ranking

---

Such information is really good for me and also others, But you need more sharing for community.
______________________________
<a href="http://www.BabyJog.com">baby jogger baby strollers</a>

[hairtransplant]

The HTML/CSS structure

I've decided on the following HTML/CSS approach:

div.fileinputs {
position: relative;
}

div.fakefile {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}

input.file {
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}

<div class="fileinputs">
<input type="file" class="file" />
<div class="fakefile">
<input />
<img src="search.gif" />
</div>
</div>

The surrounding <div class="fileinputs"> is positioned relatively so that we can create an absolutely positioned layer inside it: the fake file input.

The <div class="fakefile">, containing the fake input and the button, is positioned absolutely and has a z-index of 1, so that it appears underneath the real file input.

The real file input field also gets position: relative to be able to assign it a z-index. After all, the real field should be on top of the fake field. Then we set the opacity of the real file input field to 0, making it effectively invisible.