CSS自定义文件上传按钮
2020-11-15 13:39
标签：blog http color os 文件 width
今天一同事问我文件上传按钮的问题，情况是这样的，他页面上有3个按钮，分为左中右三个，左边的位按钮甲，右边的位按钮乙，而中间的就是个文件选择按钮，情况大概是这个样子的： 两边的按钮都有了样式，但中间的选择文件的样式死活调不出来，于是我就同他一块解决，后来经过自己设置width,height折腾无果，再求助google终于找到了解决办法，这个方法是这样的： 用一个标签套着文件域，然后调整文件域外边的元素，设置成按钮样式，然后，在把文件域“隐藏”掉（这里的隐藏只是把透明度改为0，这样元素还是存在的），这样，当点击“按钮”时就会触发文件域，就可以选择文件了，下面看下代码吧： html部分： CSS部分（代码片段）： ok，经过这么一折腾，文件选择按钮就比浏览器默认的好多了。 效果图： 最后，附上Demo及源码下载吧 CSS自定义文件上传按钮,搜素材,soscw.com CSS自定义文件上传按钮 标签：blog http color os 文件 width 原文地址：http://www.cnblogs.com/lonelyxmas/p/3698768.html
a
class="btn-file"> input
type="file">a>
.btn-file { position: relative;
display: inline-block;
width: 156px;
height: 43px;
background: #e4e4e4
url(bg-btn.jpg) no-repeat
center center;
text-align: center;
line-height: 68px;
overflow: hidden;
} .btn-file:hover { background-image: url(bg-btn-hover.jpg);
} .btn-file input { position: absolute;
top: 0;
left: 0;
width: 156px;
height: 43px;
opacity: 0;
filter: alpha(opacity: 0);
cursor: pointer;
}
上一篇：.net获取ip
下一篇：asp.net控件循环变色