表单input file上传控件CSS美化样式特效
CSS实现文件上传表单上传控件input file样式美化篇
- input file样式美化目录
1、文件上传表单input file样式说明 - TOP
本上传表单特效是使用纯DIV+CSS代码实现,兼容各大浏览器,使用方便在此美化基础上稍加CSS美化将获得更好的美化效果,也就是通过DIV CSS样式美化上传html input表单控件。
2、CSS file美化后效果图 - TOP
美化后文件上传input表单file效果图
支持多浏览器与老旧版本浏览器,测试IE6-IE8 火狐、谷歌浏览器均兼容。
3、所有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>
以上DIV+CSS控制美化的文件图片上传表单input file控件代码可直接拷贝使用。
4、在线演示: - TOP
http://www.thinkcss.com/yanshi/2012091901/
5、到百度网盘免费下载: - TOP
上一页: 上一篇:纯DIV+CSS百分比进度条
下一页: 下一篇:没有了
下一页: 下一篇:没有了
HTML必备基础教程
- • html换行br标签
- • html段落p标签
- • html table tr td th表格标签
- • html内容body标签
- • html图片img标签
- • html form表单标签
- • html input表单标签
- • html列表菜单跳转select标签
- • html div
- • html span
- • html em强调标签
- • html u下划线
- • html斜体i标签
- • html加粗b标签
- • html strong加粗标签
- • html删除线s标签
- • base链接打开方式标签
- • html iframe内嵌
- • html ul li无序列表
- • html ol li有序列表
- • html font文本标签
- • html hr水平线
CSS必备基础教程
- • css颜色 css color)
- • css宽度 css width
- • css高度 css height
- • css行高 css line-height
- • css 字间距 css letter-spacing)
- • CSS border(CSS边框
- • CSS font-family CSS字体
- • CSS 斜体 CSS font-style
- • CSS加粗 CSS font-weight
- • CSS 下划线 CSS text-decoration
- • CSS字母大小写 CSS text-transform
如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解。
CSS教程文章修订日期:2012-09-19 点击:
次
原创来源:ThinkCSS 来源网址:http://www.thinkcss.com/view/m73.html
本文WWW.ThinkCSS.COM(DIV CSS) ThinkCSS版权所有,欢迎转载,并注明出处来源及URL!。