Input (File) Browse button beautification

First, let's take a look at the common features of browser buttons:

1. You can set the overall width and height, but setting the width in IE, Firefox, and opera does not affect the width of the browser button;

2. in Google, you can click the input area to bring up the window. in IE (ie 6 was not tested), click the Browse button to bring up the window. Double-click the text area to bring up the window; in Firefox and opera, click input in any region to bring up a window;

3. Set the input font size. The traffic buttons for IE, Firefox, and opera become larger (width and height ). (This is important );

From the above common features, as long as the third one is what we need most.

 

Now we can start to beautify:

Idea: Use the tag as a button, set the width, add the overflow: hidden attribute, and then place <input type = "file"/> in the tag, align input with the upper-right corner of A, and set the transparency of input to 0.

Why is alignment in the upper right corner?

The reason for alignment in the upper right corner is that in IE, Firefox, and opera, the cursor is placed on the text box and displayed as text. Another reason is that you need to double-click the text area in IE to bring up the window, this is also the third reason why I use the common features mentioned above.

ExampleCodeAs follows:

123456789

< Style > A {display: inline-block; width: 100px; Height: 40px; Background: red; position: relative; overflow: hidden ;} A: hover {Background: green ;} Input {position: absolute; Right: 0; top: 0; font-size: 100px; opacity: 0; filter: alpha (opacity = 0 );} </ Style > < A Href = "#" > < Input Type = "File" Value = "Browse" /> </ A >

In this way, the style of the input browsing button of Each browser is consistent, and the style of the file button is beautified.