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

 　

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

|
电脑应用首页
|
硬件天堂
|
产品导购
|
软件学苑
|
网络应用
|
IT新闻
|
应用技巧
|
电脑维修
|
视频教程
|
 　 　
专 题 栏 目
 没有任何专题栏目
 [图文]谁是最佳性价比?一
 [图文]DX11主流显卡驾到
 [图文]佳能450D与尼康D6
 [图文]新版iPod全程拆解
 [组图]不看不知道 图解电
 [组图]菜鸟晋级必修课程
 [推荐]Linux常用命令
 [推荐]1秒钟 XP极速关机
 [推荐]如何使用瑞星升级
 [推荐]如何在本站发布文
相 关 文 章

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 点击数：86 更新时间：2009-9-12 8:47:24
　




　

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

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

　　

css


　　我们最多通过定义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


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

文章录入：陈鹏    责任编辑：陈鹏 
  • 上一篇文章：

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

    Copyright © 2007 - 2009 chenpeng123.com All Rights Reserved
    本站所有文章,软件等均来自网络收集,不代表本站观点，仅供学习和研究使用。如有侵犯您的版权，请联系我们，本站将立即删除。
    鲁ICP备07014697号
    你是本站第 位访客
    51La