用CSS美化input file按钮的方法

⊕ 网站首页 ⊕注册会员 ⊕ 本站免费电影 ⊕ 留言板 ⊕ 繁體中文

您现在的位置：陈鹏个人网站 >> 电脑应用 >> 网络应用 >> 网页制作 >> 正文

专题栏目

最新热门

最新推荐

相关文章

Adobe Flash CS4 试用版
 Photoshop CS3新特性概览
 腾讯TT4.5版发布 RSS可订
 Win Live Messenger 安全
 Adobe Illustrator CS3蓄
 闪客一族看过来 FlashCS
Live Messenger8.2支持多
 雅虎发布Messenger 9.0正
 最大规模 Adobe CS4套装
 Adobe Photoshop CS4最新

用CSS美化input file按钮的方法

用CSS美化input file按钮的方法

作者：陈鹏文章来源：eNet 点击数：更新时间：2009-9-12 8:47:24

我们在做表单的情况下，input、textarea、button的样式比较容易定义，select和input file的样式难以定义。

　　input file在系统默认下的外观：

　　

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

　　 css

　　如果要让浏览按钮更漂亮一点，我们想定义它的背景颜色，甚至想用背景图片来代替，通过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="text/html; charset=gb2312" />

　　＜title>input file的另类做法＜/title>

　　＜style type="text/css">

　　＜!--

　　* { 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>

　　效果:

　　 css

　　虽然多了很多标签，但这种偷梁换柱的做法还是值得研究。有没有更好、更科学的作法还有待发掘。

文章录入：陈鹏责任编辑：陈鹏

上一篇文章：网站优化技术的三十条经验总结

下一篇文章：网页导航上用CSS标志当前页效果

【字体：小大】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】