input(file)按钮样式美化第二种

2021-7-22 / 0 评论 / 112 阅读 / 已推送百度

此代码可以把input按钮隐藏,并且移至A标签的上面,这样的话就美观多了,我们只需要把A标签美化,点击A标签就可以实现上传功能了,下面贴出代码。

html代码:

<a href="javascript:;" class="file gradient">选择文件
  <input type="file" >
</a>

CSS代码:

.file {
position: relative;
display: inline-block;
background: #ccc;
border: 1px solid #333;
padding: 4px 20px;
overflow: hidden;
text-decoration: none;
text-indent: 0;
line-height: 20px;
border-radius: 20px;
color: #333;
font-size: 13px;

}
.file input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
}

.gradient{

filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#fff,endcolorstr=#ccc,gradientType=0);
-ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#fff,endcolorstr=#ccc,gradientType=0);/*IE8*/
background:#ccc; /* 一些不支持背景渐变的浏览器 */
background:-moz-linear-gradient(top, #fff, #ccc);
background:-webkit-gradient(linear, 0 0, 0 bottom, from(#fff), to(#ccc));
background:-o-linear-gradient(top, #fff, #ccc);
}

评论(0)

OωO
取消