Discussion on style customization and browser compatibility issues when input element [type='file']_HTML/Xhtml_Web page production

In the past two days, I encountered such a problem when doing the written test questions of Baixing.com. I used the new features of HTML5 to implement an existing module of Baixing.com. After browsing Baixing.com for a while, I finally selected the form module used to publish information. , the reason is very simple. There are many new features for forms in HTML5. These new features are also very practical. After all, there are too many places with forms, such as registration, login, posting... ..(Hey, I’m a little off topic, dear.)

At this time, I saw such an element in the form in the original web page

My first reaction was, ha, it’s just an input element. Just use CSS to customize the style. Then I naturally prepared to "right-click" - "Inspect Element" to see how the specific style was written on Baixin.com I will find out later...

My opening method must be wrong... In this case, of course I have enough food and clothing by myself. One thing I can confirm is that if the form control for uploading files cannot run, it must use input[type= "file"], okay, just add this line of code:

Copy the code

The code is as follows:

Refresh in the chrome browser to see:

There is no doubt that this is the default style, and I find that this default style is difficult to modify. The most annoying thing is that different browsers have different default styles. It’s very clear if you borrow a picture from the Internet:

(So I’m just saying, you browsers are not obedient at all, and you don’t communicate well with each other. You are so proud of yourself, but the front-end classmates are suffering, my sister)
But the method is still very good What I thought of is to wrap the input with an element, add other required elements to the element, and set the style to achieve the desired effect. Set the position value of the input element to absolute, fill in the surrounding elements, and then make the input transparent. That’s it.
HTML code is as follows:

Copy code

The code is as follows:

< div id="input-file">
Click to upload

The corresponding CSS code is as follows:

Copy code

The code is as follows:

#input-file {
position: relative; /* Ensure the positioning of child elements*/
width: 120px;
height: 30px;
background: #eee;
border: 1px solid #ccc;
text-align: center;
cursor: pointer;
}
#text {
display: inline-block ;
margin-top: 5px;
color: #666;
font-family: "黑体";
font-size: 18px;
}
#file {
display: block;
position: absolute;
top: 0;
left: 0;
width: 120px; /* Keep the width and height consistent with the surrounding elements*/
height: 30px ;
opacity: 0;
-moz-opacity: 0; /* Compatible with old browsers*/
filter: alpha(opacity=0); /* Compatible with IE */
}

The display effect is as shown below:

kimoji...
Eight times over, there is still a bug here. When it is made into a button like this, it should be clickable when the mouse is hovering, but even if cursor: pointer; is added to all elements, Properties, some areas will still be displayed as pointers. Is there any expert who can solve this problem?