更改上传按钮的样式示例

网络
即使没有人为你鼓掌，也要优雅的谢幕，感谢自己的认真付出。我们未来都是巨星，别人信不信无所谓，我们自己必须坚信！

如果你曾经试过，你就会知道，用纯CSS样式加HTML实现统一的上传文件按钮可能会很麻烦。看看下面的不同浏览器的截图。很明显的，他们长得很不一样。

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

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

XML/HTML Code复制内容到剪贴板
  1. <divclass="fileUploadbtnbtn-primary">
  2. <span>Upload</span>
  3. <inputtype="file"class="upload"/>
  4. </div>

　　第2步：CSS： 有点棘手了

JavaScript Code复制内容到剪贴板
  1. .fileUpload{
  2. position:relative;
  3. overflow:hidden;
  4. margin:10px;
  5. }
  7. .fileUploadinput.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:<spanstyle="width:auto;height:auto;float:none;"id="3_nwp"><astyle="text-decoration:none;"mpid="3"target="_blank"rel="nofollow noopener noreferrer" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=ef23810e363b7f29&k=alpha&k0=alpha&kdi0=0&luki=3&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=297f3b36e8123ef&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F5405%2Ehtml&urlid=0"id="3_nwl"><spanstyle="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">alpha</span></a></span>(opacity=0);
  16. }

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

　　演示：

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

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

　　JavaScript：

JavaScript Code复制内容到剪贴板
  1. document.getElementById("uploadBtn").onchange=function(){
  2. document.getElementById("uploadFile").value=this.value;
  3. };

　　DOM:

JavaScript Code复制内容到剪贴板
  1. <inputid="uploadFile"placeholder="ChooseFile"disabled="disabled"/>
  2. <divclass="fileUploadbtnbtn-primary">
  3. <<spanstyle="width:auto;height:auto;float:none;"id="1_nwp"><astyle="text-decoration:none;"mpid="1"target="_blank"rel="nofollow noopener noreferrer" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=ef23810e363b7f29&k=span&k0=span&kdi0=0&luki=7&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=297f3b36e8123ef&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F5405%2Ehtml&urlid=0"id="1_nwl"><spanstyle="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">span</span></a></span>>Upload</span>
  4. <inputid="uploadBtn"type="file"class="upload"/>
  5. </div>

　　演示：


以上就是更改上传按钮的样式示例。我的不幸，恰恰在于我缺乏拒绝的能力。我害怕一旦拒绝别人，便会在彼此心里留下永远无法愈合的裂痕。更多关于更改上传按钮的样式示例请关注haodaima.com其它相关文章！