Discussion on style customization and browser compatibility issues when using input element [type="file"]

I encountered such a problem when doing the written test questions of Baixing.com these two days. I used the new features of HTML5 to implement an existing module of Baixing.com. After browsing Baixing.com for a while, I finally chose the form module used for publishing 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.)

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

My first reaction was, ha, it's just an input element, I can customize the style with CSS, then I naturally prepared to "right click" - "inspect element" to see the specific style of Baixing.com and found out later...

I must have opened it incorrectly... In this case, of course I have to do it myself. One thing I can confirm is that this form control for uploading files must use input[type="file"]. OK, just add this line of code:

Copy code

The code is as follows:

Refresh in the Chrome browser:

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

(So I say, you browsers are not obedient at all, and you don’t communicate well with each other. You are so high up, but the front-end students are suffering.)
However, the solution is still easy to think of. Use an element to wrap the input, 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 to fill the outer elements, and then make the input transparent.
The HTML code is as follows:

Copy code

The code is as follows:

<div id="input-file">
<span id="text">Click to upload</span>
<input id="file" type="file" />
</div>

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; /* The width and height should be consistent with the surrounding elements*/
height: 30px;
opacity: 0;
-moz-opacity: 0; /* Compatible with older browsers */
filter: alpha(opacity=0); /* IE compatible */
}

The display effect is as shown below:

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

<<: Solution to the error reported by Mysql systemctl start mysqld

>>: Detailed explanation of value transfer between parent and child components in Vue3

Detailed explanation of CSS style cascading rules

Discussion on style customization and browser compatibility issues when using input element [type="file"]

Detailed explanation of CSS style cascading rules

Install ethereum/Ethereum from scratch under CentOS7

WeChat applet custom tabbar component

CSS implements six adaptive two-column layout methods

Vue component to realize carousel animation

Example of how to mosaic an image using js

TypeScript uses vscode to monitor the code compilation process

HTML Tutorial: Collection of commonly used HTML tags (4)

Html Select uses the selected attribute to set the default selection

mysql5.7 create user authorization delete user revoke authorization

Recommend

React's method of realizing secondary linkage

CSS3 to achieve timeline effects

Detailed examples of ajax usage in js and jQuery

Detailed explanation of the solution to duplicate insertion of MySQL primary key and unique key

Detailed explanation of :key in VUE v-for

Example of how to create a database name with special characters in MySQL

Implementation of the login page of Vue actual combat record

Detailed explanation of the construction and interface management of Docker private warehouse

Implementation of React star rating component

Summary of Docker configuration container location and tips

Briefly understand the two common methods of creating files in Linux terminal

Get the calculated style in the CSS element (after cascading/final style)

Complete steps for using Nginx+Tomcat for load balancing under Windows

Linux CentOS 6.5 Uninstall, tar and install MySQL tutorial

Sharing of experience on repairing MySQL innodb exceptions