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

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:

<input type="file" />

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

Recommend

Introduction and use of js observer mode

Table of contents I. Definition 2. Usage scenario...

MYSQL Left Join optimization (10 seconds to 20 milliseconds)

Table of contents 【Function Background】 [Raw SQL]...

Detailed steps for installing and using vmware esxi6.5

Table of contents Introduction Architecture Advan...

Vue implements sample code for dragging files from desktop to web page (can display pictures/audio/video)

Effect If you use it, please optimize the code an...

Analysis and opinions on the design structure of the large picture on the homepage of Taobao Mall (picture)

After I analyzed the Taobao details page last time...

How to maintain MySQL indexes and data tables

Table of contents Find and fix table conflicts Up...

A brief discussion of several browser compatibility issues encountered

background Solving browser compatibility issues i...

A brief analysis of how to access Windows 10 host folders from CentOS 8 virtual machines

After installing VMware Tools, ① text can be copi...

The effect of zooming in on a Taobao store is similar to the principle of using a slideshow.

Today I got familiar with the mouse zooming effect...

React Hooks Common Use Scenarios (Summary)

Table of contents 1. State Hook 1. Basic usage 2....

Detailed explanation of the differences between px, em, rem, %, vw, vh units in CSS

1. px px is the abbreviation of pixel, a relative...

How to understand SELinux under Linux

Table of contents 1. Introduction to SELinux 2. B...

A record of a Linux server intrusion emergency response (summary)

Recently, we received a request for help from a c...

Vue implements dynamic query rule generation component

1. Dynamic query rules The dynamic query rules ar...

It is not recommended to copy the content in Word directly to the editor on the website.

<br />Question: Why is it not recommended to...