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

来源：互联网发布：sql多表修改语句大全编辑：程序博客网时间：2024/05/15 00:29

<!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> <mce:style type="text/css"></mce:style><style type="text/css" mce_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" /><br /> 密　码: <input type="password" name="pwd" id="pwd" class="txt" /><br /><input type="submit" name="btnSubmit" id="btnCancel" value="重置" class="btn" /><input type="submit" name="btnSubmit" id="btnSubmit" value="提交" class="btn" /></div></body></html>