深山老林

生活随笔,记下生命中的脚印!
    <<  常用CSS2基本定义例子 | 首 页 | [原]用target实现动态效果  >>
  • 特别的表单定义

    2006-01-03

    版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明
    http://forest.blogbus.com/logs/1783937.html

    今天在网上看到的一个CSS样式表,转下来分享:
    ---------------------------------------------------------------
    <!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>FireFox / Mozilla / Opera / IE 适用</title>
    <style type="text/css" by tesion.>
    /* CSS v.02 by tesion.
    CopyRight: http://www.netjoin.net
    Contact: renziweb@hotmail.com
    原创表单变色
    */
    /*定义全局样式 */
    input,select,textarea,div {
    font: 12px Arial
    /* 此部分为表单和容器的字体定义 */
    }
    /* 所有表单定义默认 */
    input,select,textarea {
    border: 1px solid #EFEFEF;
    }
    /* 利用鼠标事件 :hover 来定义当鼠标经过时样式 */
    input:hover,select:hover,textarea:hover {
    background: #F0F9FB;
    border: 1px solid #1D95C7;
    }
    /* 由于 :hover 事件只有 Mozilla 支持,因此为方便IE使用 expression 批量定义 */
    input,select,textarea {
    tesion:expression(onmouseover=function()
    {this.style.backgroundColor="#F0F9FB";this.style.border="1px solid #1D95C7"},
    onmouseout=function()
    {this.style.backgroundColor="#FFFFFF";this.style.border="1px solid #EFEFEF"})
    }
    /* 如上 */
    div {
    background: #EFEFEF;
    padding: 10px; /* 填充 */
    cursor: pointer /* 鼠标 */
    }
    div:hover {
    background: #F0F9FB
    }
    div {
    tesion:expression(onmouseover=function()
    {this.style.backgroundColor="#F0F9FB"},
    onmouseout=function()
    {this.style.backgroundColor="#EFEFEF"})
    }
    /* 不错吧? */
    </style>
    </head>
    <body>
    <p>
      <input type="text" size="20" maxlength="16" />
      <br />
      <select name="select">
      </select>
      <br />
      <textarea name="textarea"></textarea>
    </p>
    <div>这么简单</div>
    </body>
    </html>
    ---------------------------------------------------------------
    转自特别的表单定义


    随机文章:

    [转]两列一边宽度固定,另一边宽度自适应布局 2007-05-26
    [原]一行内文本溢出的处理 2007-04-26
    [分享]DIV内容垂直居中 2007-01-22
    改版心得 2006-03-17
    CSS布局自适应高度解决方法 2006-03-16

    收藏到:Del.icio.us




    Tag:CSS 代码分享
    引用地址:
    Ghost 发表于18:11 | 编辑 | 继续话题 | 转发 | 推荐

搜索

最新日志

  • [公告]本BLOG搬家了
  • [原]由text-indent引起的问题
  • [活动]WebRebuild.ORG对外成立日座谈会
  • [原]背景半透明效果
  • 把图像热区跟链接关联起来
  • [原]清除浮动最简单的方法
  • FF下一个不错的web IM
  • [公告]本BLOG无限期停止更新
  • [原]二栏宽高自适应布局
  • [原]关于"display:none"对SEO不友好的说法

最新评论

  • 赵连城:第二种方法好像IE下又不行了,有没有能兼容IE和FF的解...
  • aloo:谢谢哈~ cssmaster推荐这篇文章~ 一看...
  • 豆猫:在ie7 中没问题,但是ie6 #midpart的右边宽...
  • 镜:跟我在《CSS布局实录》上看到的一致.....
  • 刘冬海:<xsl:template match="...
  • aloo:顶一下 继续支持~
  • greengnn:自适应高度这里不知道可以兼容复杂度多高的内容,作为Dem...
  • Colinivy:貌似margin-right 写成margin-left...
  • s5s5:顶
  • iVane:Try this ,guy~ http://www...
  • RSS 什么是RSS?
    用IM提醒我内容更新
    订阅到鲜果阅读器
    订阅到Google阅读器
    订阅到抓虾阅读器
  • 博客大巴
    博客大巴使用指南
    博客大巴模板中心
    免费注册博客大巴
Copyright © 2002-2008 BlogBus.com, All Rights Reserved. 博客大巴 版权所有