Style customization for the input element [typefile] has always been a problem in browser compatibility. The following describes the style customization for the input [typefile] in different browsers, if you are interested, you can refer to the two days when I encountered such a problem when I was doing pen tests for the People's Network. I used the new HTML5 features to implement a module available for the People's Network, after a while in the People's Network, I finally selected the form module used to publish information. The reason is very simple. In HTML5, there are many new forms that can be used. These new features are also very practical, after all, there are too many forms, such as registration, login, and posting ...... (Hello, I have a problem .)
At this time, I can see that the form in the original webpage has such an element.
My first response is, HA and input elements. You can use CSS to customize the style, then I naturally prepared "right-click"-"review elements" to see how the specific style people network was written and found out ......
It must be that I cannot open it ...... in this case, of course, it's just a breeze. One thing I can be sure of is that the Form Control for uploading files cannot run using input [type = "file"]. Okay, add such a line of code directly:
The Code is as follows:
Refresh in chrome to see:
There is no doubt that this is a preset style, and I found that this preset style is not easy to modify. the most annoying thing is that different browser preset styles are different, it is clear to borrow an image from the Internet:
(So I just want to say that you browsers are not obedient at all, and they do not communicate well with each other. They are so high that they are bitter, but they are front-end students, your sister)
However, the method is very good. Wrap the input with an element, add other 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 peripheral element, and then make the input transparent.
The HTML code is as follows:
The Code is as follows:
Click to upload
The corresponding CSS code is as follows:
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;/* consistent width and peripheral elements */
Height: 30px;
Opacity: 0;
-Moz-opacity: 0;/* compatible with older browsers */
Filter: alpha (opacity = 0);/* compatible with IE */
}
Display Effect
Kimoji ......
There is still a bug here. When such a button is made, it should be clickable when the mouse is hovering, but even if the cursor: pointer; attribute is added to all elements, some areas are still displayed as pointers. Can you solve this problem?
