所有使用纯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>

这有问题吗?有更简单的方法吗?

学以致用 profile image