Page 1 of 1

Styling A File Browse Button for <input type="file"> button Rate Topic: ****- 4 Votes

#1 the_hangman  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 14
  • View blog
  • Posts: 602
  • Joined: 18-January 06

Posted 10 April 2006 - 12:02 PM

It seems that it's quite simple to style the buttons on your page... until you get to the browse button. The browse button never changes. Why? Who knows. But it doesn't. I finally found a way to get around it though!

I just figured this out with some help from Arbitrator (thank you much). In my search I found that a lot of people ask how to do this, so in case anyone wants to know how; here it is.

First you are going to make 2 buttons. One of them will be the button that you want people to see, and the other will be the regular browser button. Make sure you place them in that order and do not put a line break in between
<input type="button" value="Open File">
<input type="file">


Next give the "pseudobutton" (the button you want to see) the style you want. you also want to assign layers to each button with "z-index". The pseudobutton should be z-index:1 and the browse button should be z-index:2

Note: The browse button is smaller than the usual button. For best results, resize the pseudobutton to match the browse button (width:75px; height:20px). You will have to resize the font too.

Next: You want to move the browse button OVERTOP of the pseudobutton. It should be covering it exactly. In IE you can remove the borders and the change the width to 0 to move it. In other browsers it doesn't appear the same. When you set the position of the browser button, set it EXACTLY over the pseudobutton, then in an IF comment you can set IE properties.

Now that your buttons are positioned, you need to make it so that you can see the pseudobutton. All you need to do is change the opactity (transparency) of the browse button to 0. This enables you to see through the browse button as if it were invisible, but letting you still click on it.

<style type="text/css">
input.hide
	{
  position:absolute;
  left:-137px;
  -moz-opacity:0;
  filter:alpha(opacity: 0);
  opacity: 0;
  z-index: 2;
	}

input.red
	{
  background-color:#cc0000;
  font-weight:bold;
  color:#ffffff;
  z-index:1;
  width:75px;
  height:20px;
  font-size:10px;
	}
</style>

<!--[if IE]>
	<style type="text/css">
	input.hide
  {
	  position:absolute;
	  left:10px;
	  -moz-opacity:0;
	  filter:alpha(opacity: 0);
	  opacity: 0;
	  z-index: 2;
	  width:0px;
	  border-width:0px;
  }
	</style>
<![endif]-->

<body>
<input type="button" class="red" id="pseudobutton" value="Open File">
<input type="file" class="hide" id="openssme">
</body>


For added style to complete the button and make it all convincing, you need to make the button invert, like a normal button does. You will need a little piece of javascript for this.
First give each button an ID. Then you will use the javascript to change the border-style of the pseudobutton, when clicking on the browse button.
<script type="text/javascript">
function buttonPush (buttonStatus)
  {
  if (buttonStatus == "depressed")
document.getElementById("pseudobutton").style.borderStyle = "inset";
  else
document.getElementById("pseudobutton").style.borderStyle = "outset";
  }
</script>

Make sure you add the appropriate javascript in with the button to make it call the function!
<input type="file" class="hide" id="openssme" onmousedown="buttonPush('depressed');" onmouseup="buttonPush('normal');" onmouseout="buttonPush('phased');">



Now your button should work just like a regular button, but it's not! yay!!



Below is a sample of the code to play with.

Attached File(s)



Is This A Good Question/Topic? 2
  • +

Replies To: Styling A File Browse Button

#2 oomlaut  Icon User is offline

  • New D.I.C Head

Reputation: 3
  • View blog
  • Posts: 27
  • Joined: 07-April 09

Posted 21 April 2010 - 07:48 AM

How do you address the missing component of the input type="file" element: the displayed path to the file being uploaded? If the user is reviewing the form prior to submission, how do they ensure they are uploading the right file?
Was This Post Helpful? 0
  • +
  • -

#3 jpshah  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 19-May 11

Posted 19 May 2011 - 02:57 AM

Hey dude,

Many thanks for the solution man! You made my day. I searched a lot for this thing but couldn't get it anywhere else but here.

I needed to apply style for the "Browse" button in an event form where the style was applied to entire form except for <input type="file">.

Thanks a lot again for the ultimate solution man.


Cheers!
Was This Post Helpful? 0
  • +
  • -

#4 sgsutha  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 14-June 07

Posted 26 May 2013 - 05:16 AM

View Postoomlaut, on 21 April 2010 - 07:48 AM, said:

How do you address the missing component of the input type="file" element: the displayed path to the file being uploaded? If the user is reviewing the form prior to submission, how do they ensure they are uploading the right file?



<script type="text/javascript">
function getFile(){



document.getElementById('filelabel').innerHTML=document.getElementById('openssme').value



}
</script>


and use this label to set the file name
<input type="file" class="hide" id="openssme" onmousedown="buttonPush('depressed');" onmouseup="buttonPush('normal');" onmouseout="buttonPush('phased');" onchange="getFile();">

<label id="filelabel">No File Selected</label>

This will set the selected file name
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1