好学若饥 - 让我们共同前行!

好学网



当前位置: 好学网首页 > IT教育 > 网页设计 >

css美化input file按钮的方法

时间:2010-09-25 13:50来源: 作者: 点击:
css美化input file按钮的方法,如果要让浏览按钮更漂亮一点,我们想定义它的背景颜色,甚至想用背景图片来代替,通过css定义input flie还真是办不到的。偶然看到一篇文章:input file 文件选择框美化 作者是把系统默认的按钮设置透明度为0,再定义一个label标

网页制作Webjx文章简介:如果要让浏览按钮更漂亮一点,我们想定义它的背景颜色,甚至想用背景图片来代替,通过css定义input flie还真是办不到的。偶然看到一篇文章:input file 文件选择框美化 作者是把系统默认的按钮设置透明度为0,再定义一个label标签样式,来覆盖透明掉的按钮.

我们在做表单的情况下,input、textarea、button的样式比较容易定义,select和input file的样式难以定义。
input file在系统默认下的外观:

我们最多通过定义input的border来改变系统默认的外观:


如果要让浏览按钮更漂亮一点,我们想定义它的背景颜色,甚至想用背景图片来代替,通过css定义input flie还真是办不到的。偶然看到一篇文章:input file 文件选择框美化 作者是把系统默认的按钮设置透明度为0,再定义一个label标签样式,来覆盖透明掉的按钮。

按照作者的方法,我也试验了一下,代码如下:

<!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=texhtml; charset=gb2312 />
<title>input file的另类做法</title>
<style type=texcss>
<!--
* { font-size:12px}
body { margin:0}
.line { position:relative; float:left; padding:8px 0}
.line span { float:left}
input { border:1px solid #888; vertical-align:middle}
.file { position:absolute; left:90px; top:8px; display:none;filter:alpha(opacity=0);opacity:0}
.file1 { padding:2px 10px; display:block; float:left; background:#FF66CC; color:#fff; z-index:1; margin-left:5px; vertical-align:middle; cursor: pointer}
.inputstyle { width:150px; border:1px solid #888; z-index:99}
-->
</style>
</head>
<body>
<div class=line> <span>
<label>上传文件:</label>
<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>
</body>
</html>(责任编辑:haoxuee)

      学友请扫描下方二维码,或微信搜索公众号 haoxueecom 获取更多学习生活资讯!
     好学网微信公众号

赞一个
(0)
0%
嘘一下
(0)
0%
------分隔线----------------------------