MrBool
You must be logged in to give feedback. Click here to login
[Close]

You must be logged to download.

Click here to login

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to style a File Upload Button in CSS

We will learn today how we can give the Upload button a different appearance for the files we browse and upload using CSS and Javascript.

[close]

You didn't like the quality of this content?

Would you like to comment what you didn't like?

One of the most annoying things in my opinion when it comes to web design is when we are creating a beautiful form, with nice images for buttons, clean text fields, but there is an eye sore of a file upload field. The reason this is an eyesore is because typically you can’t style file browse buttons and fields like you can with other buttons and text fields. They behave and style slightly different. After searching and fiddling for a while we get to something that works, like below for example. This gives some attractive theme to the button and makes it good to use.

Result of our article.

Figure 1: Result of our article.

There are several methods around this issue, many use javascript, some are CSS only, others use a combination of the two. The solution we used above is in pure in CSS. Actually that’s not entirely true. There is one ‘onChange‘ event on the file browse button, but it’s an extremely simple line of code, shouldn’t confuse anybody or make your code sloppy at all.

The way this method works is easy. Normally we take a normal file browse field and make it transparent by playing with its opacity. Then we create a plain text field and button side by side. The transparent file field gets placed directly on top of the text field and button so that when the user thinks they are clicking the ‘pretty‘ button, but they’re really clicking on the transparent file browse field.

The placement of one field on top of the other is achieved by using the CSS z-index and positioning properties. In this example the pretty button is actually a background image of the container div. The javascript comes in to complete the effect of the file browse field. When a file is selected from the file system, the file field would normally display the path to this file. We used an ‘onChange’ event to copy the path of the file from the transparent file field to the visible text field.

Thesis applies its own style to comment submit buttons, but some users prefer to use the browser’s default style for this. To restore the browser’s default style to the comment submit buttons in Thesis, place the following code in custom.css:

Listing1: Code to restore the browser’s default style

/* Restore Browser's Default Submit Button Style */
.custom #commentform input.form_submit {
	background:ButtonFace;
	color:ButtonText;
	border:2px outset ButtonFace;
}
.custom #commentform input.form_submit:active {
	border-style:inset;
	-webkit-appearance:push-button;
}

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 and this makes the task even more complex but let’s takes a look at the solution for the same.

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.

Listing2: Code displaying the attributes of Browse button

<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 opacity (transparency) of the browse button to 0. This enables you to see through the browse button as if it was invisible, but letting you still click on it.

Listing3: Code displaying opacity of the browse button to 0

<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.

Listing4: Code to change the border-style of the pseudobutton

<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!

Listing5: Javascript added to call the function

<input type="file" class="hide" id="openssme"onmousedown="buttonPush('depressed');" onmouseup="buttonPush('normal');"onmouseout="buttonPush('phased');">

Conclusion

This brings us to an end to this interesting article and now your button should work just as intended. Hope you liked and see you next time.


I am a software developer from India with hands on experience on java, html for over 5 years.

What did you think of this post?

Did you like the post?

Help us to keep publishing good contents like this.

SUPPORT US

funded

remaining

[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually � in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits � in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login