Rumah >hujung hadapan web >tutorial css >如何用纯css实现input[type=file]的样式控制（代码示例）
如何用纯css实现input[type=file]的样式控制（代码示例）
- 不言asal
- 2018-11-06 11:02:514616semak imbas
本篇文章给大家分享的内容是关于如何用纯css实现input[type=file]的样式控制（代码示例），有需要的朋友可以参考一下。
如果您搜索有关如何进行完全外观控制的常见问题的解决方案，则结果可能适合以下3个类别之一：37df43ef3c7d72840fd7d4117070ed42
需要Javascript。
在主浏览器中不起作用。
实际上并没有提供完整的风格控制。
上述三个肯定适合我在网上找到的每一个答案。但你可以用纯CSS做到这一点。它需要一个包装元素来挂钩样式（输入本身是隐藏的，因为它的样式是如此有限/限制）。语义上的概念可能想要把这个变成bfdf57554631c62e63917d588904f58a- 顺便说一下，每个元素有多个标签没有错的。我们看看从下面这个示例
代码如下：
<!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>Atas ialah kandungan terperinci 如何用纯css实现input[type=file]的样式控制（代码示例）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：css实现自定义选择框的技巧方法（代码示例）Artikel seterusnya：如何使用纯css实现圆形图像？（代码实例）