平武建站

css怎么更改上传按钮的样式

这篇文章主要讲解了“css怎么更改上传按钮的样式”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“css怎么更改上传按钮的样式”吧！

成都创新互联于2013年创立，先为抚宁等服务建站，抚宁等地企业，进行企业商务咨询服务。为抚宁企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

我们的目标是创造一个简洁，用纯CSS实现的，在所有浏览器里的样子和布局是一样的上传文件按钮。我们可以这样：

步骤1.创建一个简单的HTML标记 
 

XML/HTML Code复制内容到剪贴板

  1.   

  2.     Upload  

  3.       

  

第2步：CSS： 有点棘手了
 

JavaScript Code复制内容到剪贴板

  1. .fileUpload {   

  2.     position: relative;   

  3.     overflow: hidden;   

  4.     margin: 10px;   

  5. }   

  6.     

  7. .fileUpload input.upload {  position: absolute;   

  8.     top: 0;   

  9.     right: 0;   

  10.     margin: 0;   

  11.     padding: 0;   

  12.     font-size: 20px;   

  13.     cursor: pointer;   

  14.     opacity: 0;   

  15.     filter: alpha(opacity=0);   

  16. }   

为简单起见，我使用应用了BootstrapCSS样式的按钮  (div.file-upload)。

演示：

css怎么更改上传按钮的样式

上传按钮，显示选中的文件

不幸的是纯CSS的做不到这一点。但是，如果你真的想显示所选文件，下面的JavaScript代码片段可以帮助你。

JavaScript： 
 

JavaScript Code复制内容到剪贴板

  1. document.getElementById("uploadBtn").onchange = function () {   

  2.     document.getElementById("uploadFile").value = this.value;   

  3. };   

DOM:
 

JavaScript Code复制内容到剪贴板

  1.   

  2.   

  3.     <span>Upload   

  4.        

  

演示：

css怎么更改上传按钮的样式

感谢各位的阅读，以上就是“css怎么更改上传按钮的样式”的内容了，经过本文的学习后，相信大家对css怎么更改上传按钮的样式这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！


分享文章：css怎么更改上传按钮的样式
链接分享：http://pwwzsj.com/article/gjchgo.html

其他资讯