Shulou(Shulou.com)06/02 Report--

Today, I would like to share with you how to use pure css to achieve input [type=file] style control of the relevant knowledge, detailed content, clear logic, I believe that most people still know too much about this knowledge, so share this article for your reference, I hope you can learn something after reading this article, let's take a look at it.

If you search for solutions to common questions about how to perform full appearance control, the results may fit into one of the following three categories:

Javascript is required.

Does not work in the main browser.

It does not actually provide complete style control.

The above three must be suitable for every answer I find online. But you can do this with pure CSS. It requires a wrapper element to hook up the style (the input itself is hidden because its style is so limited / limited). The semantic concept may want to turn this into-by the way, there is nothing wrong with having multiple tags for each element. Let's take a look at the following example

The code is as follows:

.fileContainer {

Overflow:hidden

Position:relative

}

.fileContainer [type=file] {

Cursor:inherit

Display:block

Font-size:999px

Filter:alpha (opacity=0)

Min-height:100%

Min-width:100%

Opacity:0

Position:absolute

Right:0

Text-align:right

Top:0

}

/ * Examplestylisticflourishes*/

.fileContainer {

Background:red

Border-radius:.5em

Float:left

Padding:.5em

}

.fileContainer [type=file] {

Cursor:pointer

}

}

Click here to upload files!

These are all the contents of this article entitled "how to use pure css to achieve style control in input [type=file]". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.