Home > Article > Web Front-end > How to implement style control of input[type=file] using pure CSS (code example)
How to implement style control of input[type=file] using pure CSS (code example)
- 不言Original
- 2018-11-06 11:02:514561browse
The content of this article is about how to use pure CSS to implement style control of input[type=file] (code example). Friends in need can refer to it.
If you search for solutions to common questions about how to have full appearance control, the results may fit into one of the following 3 categories: 714779e36f6b8fe3da1575391740131b
Requires Javascript.
Does not work in the main browser.
Doesn't actually provide complete style control.
The above three definitely fit every answer I found online. But you can do this with pure CSS. It requires a wrapping element to hook the styling on (the input itself is hidden because its styling is so limited/restricted). Semantics might want to turn this into bfdf57554631c62e63917d588904f58a - by the way, there's nothing wrong with having multiple labels per element. Let’s take a look at this example from below
The code is as follows:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.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;
}
/* Example stylistic flourishes */
.fileContainer {
background: red;
border-radius: .5em;
float: left;
padding: .5em;
}
.fileContainer [type=file] {
cursor: pointer;
}
}
</style>
</head>
<body>
<label class="fileContainer">
点击这里实现文件上传!
<input type="file"/>
</label>
</body>
</html>The above is the detailed content of How to implement style control of input[type=file] using pure CSS (code example). For more information, please follow other related articles on the PHP Chinese website!