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

Teach you how to use vscode to build a react-native development environment

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

Teach you how to use vscode to build a react-native development environment

After submitting the html drop-down menu, the selected value is retained instead of returning to the default value

JS realizes the automatic playback effect of pictures

Details of various font formats in HTML web pages

How to create a virtual environment using virtualenv under Windows (two ways)

Detailed explanation of the benefits of PNG in various network image formats

How to install MySQL under Linux (yum and source code compilation)

Example of usage of keep-alive component in Vue

Solve the problem of installing Tenda U12 wireless network card driver on Centos7

Summary of three ways to implement ranking in MySQL without using order by

Recommend

Installation and usage analysis of Portainer, a visual UI management tool for Docker

Introduction to document.activeELement focus element in JavaScript

mysql5.7.14 decompression version installation and configuration method graphic tutorial (win10)

Resolving MySQL implicit conversion issues

Detailed explanation of the spacing problem between img tags

MySQL prepare principle detailed explanation

How to click on the a tag to pop up the input file upload dialog box

Example code for implementing auto-increment sequence in mysql

Website performance: Image and Cookie optimization and mobile application optimization

Modify the boot time of grub in ubuntu

Mount the disk in a directory under Ubuntu 18.04

CSS to change the size (width, height) of the image when the mouse passes over the image hyperlink

Detailed explanation of MySQL database (based on Ubuntu 14.0.4 LTS 64 bit)

Several CSS3 tag shorthands (recommended)

Solve MySQL login error: 'Access denied for user 'root'@'localhost'