bet9会员登录入口

dedecms二次开发|织梦二次开发

dedecms(织梦)二次开发二次开发

bet9会员登录入口 资讯中心 织梦二次开发 怎样用纯HTML和CSS更改默认的上传文件按钮样式

怎样用纯HTML和CSS更改默认的上传文件按钮样式

时间:2015-12-03
怎样用纯HTML和CSS更改默认的上传文件按钮样式
如果你曾经试过,你就会知道,用纯CSS样式加HTML实现统一的上传文件按钮可能会很麻烦。看看下面的不同浏览器的截图。很明显的,他们长得很不一样。

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

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

<div class="fileUpload btn btn-primary"> <span>Upload</span> <input type="file" class="upload" /> </div>

  第2步:CSS: 有点棘手了

.fileUpload { position: relative; overflow: hidden; margin: 10px; } .fileUpload input.upload { position: absolute; top: 0; right: 0; margin: 0; padding: 0; font-size: 20px; cursor: pointer; opacity: 0; filter: alpha(opacity=0); }

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

  演示: 

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

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

  JavaScript: 

document.getElementById("uploadBtn").onchange = function () { document.getElementById("uploadFile").value = this.value; };

  DOM:

<input id="uploadFile" placeholder="Choose File" disabled="disabled" /> <div class="fileUpload btn btn-primary"> <span>Upload</span> <input id="uploadBtn" type="file" class="upload" /> </div>

  演示:

QQ在线客服在线客服
用手机扫描二维码 关闭
二维码
XML 地图 | Sitemap 地图