我可以在按钮内放置输入文件标签吗？

Question

我目前正在处理上传文件的按钮，但我不想使用默认输入[type = file]

这是我的片段：

%button.btn
   Upload your own
   %input{ :type => "file", :class => 'file-input' }

这里是css：

left: -34; // to align it with the button
top: -23;
position: relative;
opacity: 0;

目前它有效，我只是不确定标记。在尝试上传个人资料照片时，Twitter也具有相同的结构。

Answer 1

将输入文件按钮的不透明度设置为0并将其放置在样式化按钮div上。

Answer 2

为什么不使用：

<button type='file'>Content</button>

它的工作原理相同。

Answer 3

试试这个

Select a file: <input type="file" name="img">

更多详情Here