基础的样式文件输入

我正在使用基础，并且在文档输入中没有看到任何内容，只有一般输入元素。但是设计文件输入并不容易。如果你想在所有浏览器中保持与整个表单的设计一致，那么更多。基础的样式文件输入

我见过一些解决方案，如Styling an input type="file" button或https://github.com/filamentgroup/jQuery-Custom-File-Input，但我想知道是否有什么特定的基础，因为通常的包装div样式根本不起作用（div.large-3.columns等）。

你怎么做到的？

来源

2013-05-17 josal

你只需要按钮？还是带有文件地址的字段？如果只有按钮simpliest解决方案是demo

<a class="wrapper"> 
    button name 
    <input type="file"/> 
</a> 

.wrapper { 
    width: 100px; 
    height: 30px; 
    overflow: hidden; 
    position: relative; 
} 
input { 
    position: absolute; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    font-size: 50px; /* some huge for cursor pointer hack */ 
}

也可以使用伪类的一些浏览器see article

来源

2013-05-17 10:48:32 Vicky

这是一个非常简单的选项，谢谢你的答案。但是，它会非常有用，恕我直言，以显示文件地址或至少一个指示器说，该文件已被加载:)因此，也许最简单的解决方案将风格现有的文件输入元素，包括文件地址字段。 .. – josal

我刚申请了.button类的输入标签。它对我来说看起来不错。

来源

2013-06-18 12:01:05 Vineonardo

它不会为输入文件显示与其余输入字段相同的样式。 – josal

基础的样式文件输入

回答

相关问题