新零售商城 快打包

CSS3 input[type=file] 样式美化,input上传按钮美化

所属栏目:HTML5+CSS3 时间:2016-01-16 来源:网络 作者:不详 点击:


html自带的上传按钮非常丑,在HTML4+CSS2时,想要美化文件上传还是很麻烦了。

HTML5+CSS3后,就非常方便了,实例如下:

思路:

input file上传按钮的美化思路是,先把之前的按钮透明度opacity设置为0,然后,外层用div包裹,就实现了美化功能。

代码如下:

DOM结构:


????点击这里上传文件选择文件????

CSS样式1:

/*a??upload?*/.a-upload?{
????padding:?4px?10px;
????height:?20px;
????line-height:?20px;
????position:?relative;
????cursor:?pointer;
????color:?#888;
????background:?#fafafa;
????border:?1px?solid?#ddd;
????border-radius:?4px;
????overflow:?hidden;
????display:?inline-block;
????*display:?inline;
????*zoom:?1}.a-upload??input?{
????position:?absolute;
????font-size:?100px;
????right:?0;
????top:?0;
????opacity:?0;
????filter:?alpha(opacity=0);
????cursor:?pointer}.a-upload:hover?{
????color:?#444;
????background:?#eee;
????border-color:?#ccc;
????text-decoration:?none}

样式2:

.file?{
????position:?relative;
????display:?inline-block;
????background:?#D0EEFF;
????border:?1px?solid?#99D3F5;
????border-radius:?4px;
????padding:?4px?12px;
????overflow:?hidden;
????color:?#1E88C7;
????text-decoration:?none;
????text-indent:?0;
????line-height:?20px;}.file?input?{
????position:?absolute;
????font-size:?100px;
????right:?0;
????top:?0;
????opacity:?0;}.file:hover?{
????background:?#AADFFD;
????border-color:?#78C3F3;
????color:?#004974;
????text-decoration:?none;}

样式一效果:

enter image description here

样式二效果:

enter image description here

请站长喝杯咖啡?

站长一直坚持白天工作、晚上熬夜更新素材,付出了巨大的精力和时间,其中的辛酸难以言述。

坚持免积分、免登录、无任何限制下载!如果本站素材对你有用,不妨考虑请站长喝杯咖啡鼓励一下!

共有 0 条评论

给个评价吧

验证码: