所有使用纯CSS的输入[type = file]样式控件(示例)
学以致用
・1 分钟阅读
如果搜索如何通过
- 需要Javascript ,
- 在主要浏览器中不工作,
- 不提供完全的风格控制,
这个账单肯定符合我在StackOverflow上找到的每个答案,但是你可以用纯CSS做这个,它需要一个包装元素来挂钩样式(input本身是隐藏的,因为它的样式是如此有限/限制)。
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;
}
HTML
<label class= "fileContainer">
Click here to trigger the file uploader!
<input type= "file" />
</label>
这有问题吗?有更简单的方法吗?