自定义上传按钮 [英] Custom Upload Button

问题描述

您好我想知道如何创建自己的自定义文件上传按钮，因为我能做的最好的是

我想要实现的是

如果无论如何这样做我会非常感激，
并且我可以得到解释如何使用代码而不是答案的答案，链接到允许您下载按钮或其他东西的网站像这样，谢谢你：）

解决方案

虽然这些答案中的一些会产生看起来像你希望它起作用的东西，但是当他们试图按照你期望的方式行事时会崩溃。文件输入的样式不直接，您将无法尝试。但是，有一个技巧。

诀窍是将输入的不透明度变为0，然后将其下方的背景更改为您想要的按钮样式。 / p>

  .file_button_container，.file_button_container input {height：47px;宽度：263px; } .file_button_container {background：transparent url（http://i.stack.imgur.com/BT5AB.png）左上角不重复; } .file_button_container输入{opacity：0; }  

 < div class =file_button_container>< ; input type =file/>< / div>  

hi i was just wondering how you can create you own custom file upload button, because the best i can do is

and what i want to achieve is

if there is anyway of doing this i would be very thankful, and please can i have answers that explain how to do it with code and not answers with links to websites that allow you to download a button or something like that,Thank You :)

解决方案

Although some of these answers will create something that looks like you want it to work, they will break down when they try to perform the way that you expect. The file input doesn't style well directly and you will have trouble trying it. However, there is a trick.

The trick is to turn the opacity of the input to 0 and then change the background underneath it to the button style that you want.

.file_button_container,
.file_button_container input {
     height: 47px;
     width: 263px;
 }

 .file_button_container {
     background: transparent url(http://i.stack.imgur.com/BT5AB.png) left top no-repeat;
 }

 .file_button_container input {
     opacity: 0;
 }

<div class="file_button_container"><input type="file" /></div>

这篇关于自定义上传按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！