input file上传表单美化file按钮美化篇

时间：2014-05-23 11:29:53 阅读：257 评论：0 收藏：0 [点我收藏+]

标签：style class c tar ext http

一、表单input file样式说明 - TOP

本上传表单特效是使用纯DIV+CSS代码实现，兼容各大浏览器，使用方便在此美化基础上稍加CSS美化将获得更好的美化效果，也就是通过DIV CSS样式美化上传表单控件。

二、CSS file美化后效果图 - TOP

bubuko.com,布布扣
file表单美化效果图

支持多浏览器与老旧版本浏览器，测试IE6-IE8 火狐、谷歌浏览器均兼容。

三、所有HTML+CSS代码： - TOP

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>input file上传表单案例</title>
<style type="text/css">
<!--
* { font-size:12px; }
body { margin:0; }
input { border:0; padding:0; margin:0; }
.div { margin:0 auto; width:100%; overflow:hidden; padding:20px 0; }
.line { position:relative; margin:0 auto; width:300px; text-align:left }
.line span.span { float:left; padding-top:2px; }
.file { position:absolute; left:0; width:250px; top:0;
height:28px; filter:alpha(opacity=0); opacity:0; cursor: pointer }
.file1 { float:left; margin-left:8px; z-index:1; width:66px;
height:28px; line-height:28px; background:url(liulan.gif) no-repeat 0 0;
text-indent:-9999px; cursor: pointer }
.inputstyle { border:1px solid #BEBEBE; width:170px; float:left;
height:23px; line-height:23px; background:#FFF; z-index:99 }
-->
</style>
</head>
<body>
<div class="div">
<div class="line">
<span class="span">
<input name="" type="text" id="viewfile"
onmouseout="document.getElementById(‘upload‘).style.display=‘none‘;"
class="inputstyle" />
</span>
<label for="unload"
onmouseover="document.getElementById(‘upload‘).style.display=‘block‘;"
class="file1">浏览...</label>
<input type="file"
onchange="document.getElementById(‘viewfile‘).value=this.value;this.style.display=‘none‘;"
class="file" id="upload" />
</div>
</div>
</body>
</html>

四、input file使用说明 - TOP

这里对file上传表单美化使用图片，如果需要不同美化效果，可根据以上CSS和对应HTML代码进行简单修改即可达到自己想要css美化input file按钮效果。可以修改按钮图片和CSS进行灵活应用。

在线样式：http://www.divcss5.com/yanshi/2013020801/

五、源代码打包下载 - TOP

input file上传表单美化file按钮美化篇,布布扣,bubuko.com

input file上传表单美化file按钮美化篇

标签：style class c tar ext http

原文地址：http://www.cnblogs.com/tudouya2013/p/3737365.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行