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

 　

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

|
闂傚倷鐒﹀鍨熆閳ь剛绱掗幓鎺濈吋鐎规洘绮撻幖褰掝敃閿濆懎濡抽梻浣告惈閸燁偊宕愯ぐ鎺戞辈闊洦鎷瑰☉銏℃櫜闁糕剝鐟ラ埛宀勬⒑闂堟稒锛旈柟鍑ゆ嫹
|
缂傚倷鑳堕搹搴ㄥ矗鎼淬劌绀傛繛鎴炃氶弸搴ㄦ煏韫囧ň鍋撳畷鍥╃嵁闂備礁鐤囧銊╂嚄閸洖鍨傞柨鐕傛嫹
|
婵犵數鍋涢悺銊х尵閸岀偛绀冮柍鍝勫€搁崜顒勬⒑鐠囪尙鍑圭紒鑼帛缁旂喖宕奸妷銉х崶闂佽法鍣﹂幏锟�
|
闂備礁鎼ˇ閬嶅磿閹版澘鍨傛い鏍ㄥ焹閺嬪酣鏌曡箛濠冨櫚闁稿鎸搁埥澶婄暦閸モ晜娈洪梺璇插閻旑剟骞忛敓锟�
|
缂傚倸鍊搁崐鎼佸疮椤栫偛鍨傞柛锔诲幖閸ㄦ繈鏌ょ粙璺ㄤ粵闁稿海鍠栭弻锟犲礃閵娿儮鍋撹ぐ鎺戞辈闁跨噦鎷�
|
IT闂傚倷绀侀幖顐﹀磹閻戣棄纭€闁告劕妯婂〒濠氭煥閻曞倹瀚�
|
闂備礁婀遍崢褔鎮洪妸銉綎濠电姵鑹鹃弸渚€鏌曢崼婵愭Ц缂佺媭鍣ｉ弻宥堫檨闁告挻鐟╅、娆掔疀濞戞瑦娅㈤梺璺ㄥ櫐閹凤拷
|
闂傚倷鐒﹀鍨熆閳ь剛绱掗幓鎺濈吋鐎规洘绮岄悾鐑藉炊閳哄喛绱茬紓鍌氬€搁悧蹇旀叏閻㈢ǹ鐭楅柨鐕傛嫹
|
闂備浇宕甸崰鎰版偡閵夈儙娑樷攽鐎ｃ劉鍋撻崒鐐查唶闁哄洨鍋為悗顒€鈹戦悙鍙夘棡闁搞劎鍠栧濠氭晸閿燂拷
|
 　 　
专 题 栏 目
 濠电姷鏁搁崑娑欏緞閸ヮ剙绀堟繝闈涙４閼板灝霉閿濆懏璐℃い鈺冨厴閹鎷呴崫銉礊缂備礁顦悘婵嬪煡婢舵劕绠婚悗娑櫭壕鍐差渻閵堝繒瀵肩紒顔界懃椤曪綁宕愰悢铏规澑闂佸搫娲ㄩ崰鎾绘偘閿燂拷
相 关 文 章

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 点击数：83 更新时间：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