How to style a input type=file in html? [duplicate

问题:

This question already has an answer here:

• Styling an input type=“file” button 39 answers
• Style input type file? [duplicate] 6 answers

I did some research and found it could be hard to style a input type=file. However, I realized youtube has a beautiful button displayed when you want to upload your video to the site. (may need login: http://www.youtube.com/upload).
so basically it allows user to click the button, pick a file, and do the upload.
I am not sure how this is implemented instead of using the ugly <input> tag? Or anyone knows any alter good way to make a beautiful file upload interface?

回答1:

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;
}