如何在html中设置输入类型=文件的样式?

时间:2013-09-02 06:42:25

标签: javascript html css html5 file-upload

我做了一些研究,发现输入type = file的样式可能很难。但是,我意识到,当您想要将视频上传到网站时,youtube会显示一个漂亮的按钮。 (可能需要登录:http://www.youtube.com/upload)。
所以基本上它允许用户点击按钮,选择文件,然后进行上传。
我不确定这是如何实现的,而不是使用丑陋的<input>标签?或者任何人都知道如何制作漂亮的文件上传界面?

1 个答案:

答案 0 :(得分:4)

LIVE DEMO

<button id="imageDrop" onclick="document.getElementById('uploadImage').click()" title="Click or Drag Image">Upload image</button>

<input id="uploadImage" type="file" />

#imageDrop{      
  background:#fff;
  width:300px;
  height:180px;
  font-size:20px;
  font-style:italic;
  border-radius:18px;
  border:2px dashed #444;
}

#uploadImage{
  visibility: hidden;
  height:0px;
  width: 0px;
}