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文字垂直居中的8种方法
CSS可以轻易实现文字的水平居中，但有时我们需要文字垂直居中，除了表格可以实现这种CSS文字垂直居中以外，还有其它几种方法可以做到
2020-01-01
2006.12.06更新 TopStyle剪辑库
2006.12.06更新 TopStyle剪辑库...
2006-12-12
鼠标移动到超链接上的效果
鼠标移动到超链接上的效果...
2007-02-02
手机屏幕尺寸测试——手机的实际显示页面的宽度
本文主要通过测试，得出手机端网页实际显示的宽度，给开发人员在做手机端开发的时候做一些参考，希望能帮到大家。
2016-04-04
关于filter滤镜应用于图片的两种创意
关于filter滤镜应用于图片的两种创意...
2006-12-12
不用float实现div模块居中布局
不用float实现div模块居中布局...
2007-02-02
ie中多id的调用方法
ie中多id的调用方法...
2007-03-03
多中语言实现判断客户访问用得是那个域名然后转到对应的目录
多中语言实现判断客户访问用得是那个域名然后转到对应的目录...
2007-05-05
line-block的运用最小宽度的设置
line-block：本身是内联盒模型的存在，又具备块状盒模型的特性。很好很强大的东西啊～
2008-05-05
CSS设置网页的字体防浏览器浏览页面字体变形
CSS设置网页的字体防浏览器浏览页面字体变形...
2007-03-03

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具