+- Web Design Forum HTML CSS JavaScript PHP Graphic Design SEO forum (http://www.webdesignforum.com.au)
+-- Forum: Web and Graphic Design (/forumdisplay.php?fid=1)
+--- Forum: Graphic Design (/forumdisplay.php?fid=5)
+--- Thread: How do you style file input elements? (/showthread.php?tid=113)
Pages: 1 2
How do you style file input elements? - justinOrel - 01-12-2011 09:49 AM
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?
RE: How do you style file input elements? - lilly1236 - 07-16-2011 10:42 PM
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/
RE: How do you style file input elements? - netshet - 08-06-2011 04:59 PM
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!
RE: How do you style file input elements? - sofia20 - 09-13-2011 10:26 AM
This is a good question. Try this here
RE: How do you style file input elements? - kiruthika - 09-26-2011 05:19 PM
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.
RE: How do you style file input elements? - landmarvel - 01-05-2012 09:17 PM
Nice question. i want to know ans this question.
land marvel chennai
RE: How do you style file input elements? - displaybanner - 01-06-2012 09:10 PM
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.
RE: How do you style file input elements? - wnsgdfskgn - 01-17-2012 08:19 PM
Really Very nice information’s you are sharing. It was very useful for me.
__________________________________________
Claims Adjusters
RE: How do you style file input elements? - wnsgdfskgn - 01-18-2012 05:43 PM
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>
RE: How do you style file input elements? - hairtransplant - 01-18-2012 07:48 PM
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.