How to implement style control of input[type=file] using pure CSS (code example)-CSS Tutorial-php.cn

How to implement style control of input[type=file] using pure CSS (code example)

不言

Release： 2018-11-06 11:02:51

Original

4596 people have browsed it

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:

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 - 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>

Copy after login

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!