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> <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需再刷新一下页面才能执行]

您可能感兴趣的文章:

使用JavaScript和CSS实现文本隔行换色的方法
css文本框与按钮美化效果代码
CSS 美化段落文本之首字下沉
文本框css关闭输入法
CSS渐变文本效果的两种方法比较
用css实现隐藏文本框
CSS控制文本自动换行的问题
用CSS动态控制文本属性
详解CSS不定宽溢出文本适配滚动

标签：贵州莱芜鹤壁贺州邵阳广安混显沧州

巨人网络通讯声明：本文标题《CSS小例子(只显示下划线的文本框，像文字一样的按钮)》，本文关键词 CSS,小,例子,只,显示,下划线,；如发现本文内容存在版权问题，烦请提供相关信息告之我们，我们将及时沟通与处理。本站内容系统采集于网络，涉及言论、版权与本站无关。