首页 > Web开发 > 详细

【更改表单元素默认样式】更改文件上传按钮样式

时间:2015-11-27 00:56:22      阅读:309      评论:0      收藏:0      [点我收藏+]

虽然我们无法直接更改表单的input[type=file]按钮,但是可以通过曲线救国的方式来实现。

思路大致是这样的:

1、将<input type=‘file‘ />按钮设置透明度为0

2、在<input type=‘file‘ />上面覆盖一个button,使二者位置完全重合。

HTML代码如下

<span class="sl-custom-file">
    <input type="button" value="点击上传文件" class="btn-file"/>
    <input type="file" class="ui-input-file" />
</span>

CSS代码

.sl-custom-file {
        position: relative;
        display: inline-block;
        zoom: 1;
        cursor: pointer;
        overflow: hidden;
        vertical-align: middle;
    }
 
.btn-file{
        background-color: #E95C33 !important;
            color: #fff !important;
            border: 1px solid #E95C33 !important;
            width: 150px !important;
            border-radius: 0 !important;
}    

 


    .sl-custom-file .ui-input-file {
        position: absolute;
        right: 0;
        top: 0;
        _zoom: 30;
        font-size: 300px \9;
        height: 100%;
        _height: auto;
        opacity: 0;
        filter: alpha(opacity=0);
        -ms-filter: "alpha(opacity=0)";
        cursor: pointer;
    }

 效果图如下:

 

【更改表单元素默认样式】更改文件上传按钮样式

原文:http://www.cnblogs.com/superman66/p/4981448.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!