CSS小例子(只显示下划线的文本框，像文字一样的按钮)

更新时间：2009年03月21日 00:06:25 作者：

只显示下划线的文本框，像文字一样的按钮

<!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> <title>只显示下划线的文本框，像文字一样的按钮</title> <style type="text/css"></style><style type="text/css" bogus="1"> body{ background-color:#daeeff; /* 页面背景色 */ } form{ margin:0px; padding:0px; font:14px; } input{ font:14px Arial; } .txt{ color:#005aa7; border-bottom:1px solid #005aa7; /* 下划线效果 */ border-top:0px; border-left:0px; border-right:0px; background-color:transparent; /* 背景色透明 */ } .btn{ background-color:transparent; /* 背景色透明 */ border:0px; /*border:0px solid #005aa7;边框取消 */ cursor:pointer; }</style> </head> <body> <div> 用户名: <input type="text" name="name" id="name" class="txt" /> 密　码: <input type="password" name="pwd" id="pwd" class="txt" /> <input type="submit" name="btnSubmit" id="btnCancel" value="重置" class="btn" /> <input type="submit" name="btnSubmit" id="btnSubmit" value="提交" class="btn" /> </div> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

多浏览器css兼容分析小结
多浏览器css兼容分析小结...
2007-11-11
CSS 浏览器的等宽空格问题解决
很多时候，希望能够在 HTML 中使用空格排版。但浏览器在解析 HTML 时，会把连续的空格解析成一个，所以我们会使用   等这样的占位符。
2008-09-09
IE与FireFox的兼容性问题
IE与FireFox的兼容性问题...
2006-11-11
DIV+CSS网页另类上下布局的实例代码
在论坛里看到一位朋友在问一个上下2个内容框的，宽度为100%的布局方式，然后自己也就尝试了一下，发现了几个问题的存在
2008-10-10
广告放在文章页左上角的解决办法二
广告放在文章页左上角的解决办法二...
2007-03-03
推荐彻底弄懂CSS盒子模式(DIV布局快速入门)
推荐彻底弄懂CSS盒子模式(DIV布局快速入门)...
2007-03-03
Meta标签详解
Meta标签详解...
2007-02-02
当标题不能显示完整的解决方法
今天刚看到ChinaUI.com新改版的网站，觉得优艾网是越来越漂亮了，这次的变化的确是挺大的。一早大概的看了一下就关了，后来晚上又打开看时发现个问题。
2008-06-06
解析IE, FireFox, Opera 浏览器支持Alpha透明的方法
解析IE, FireFox, Opera 浏览器支持Alpha透明的方法...
2006-12-12
指定网页的doctype解决CSS Hacking方法总结
我们都知道，要做WD（web designer）,首先得伺侯好几个浏览器:IE6,IE7,Firefox.一般的页面，都只要求在IE6,IE7,Firefox下正常工作就行了。
2008-09-09