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://scyanting.com/article/gjchgo.html

其他资讯