讓文本框變成一條直線_表單按鈕特效

讓文本框的邊框變成一條線，很多朋友都喜歡把他的文本框變為一條橫線，體現個性。本例中還加入了背景透明，兩者配合相信會有更加不錯的效果。這樣的話你就可以使用一張圖片作為表單的背景，從而起到美化表單的作用。

<!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">
<!-- 
body{ 
background-color:#daeeff;
} 
form{ 
margin:0px; padding:0px; 
}

.txt{ 
color:#005aa7; 
border:0px; 
border-bottom:1px solid #005aa7; /* 下劃線 */ 
background-color:transparent; /* 背景透明 */ 
} 
.btn{ 
background-color:transparent; /* 背景透明 */ 
border:0px; /*border:0px solid #005aa7;取消邊框 */ 
cursor:pointer; 
} 
-->
</style>
<style type="text/css" mce_bogus="1">
 body{ 
background-color:#daeeff; /* 頁面背景色 */ 
} 
form{ 
margin:0px; padding:0px; 
}

.txt{ 
color:#005aa7; 
border:0px; 
border-bottom:1px solid #005aa7; /* 下劃線效果 */ 
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>

所屬頻道：表單按鈕特效/更新時間：2012-12-06

[收藏][報錯][返回列表]

相關表單按鈕特效：

讓文本框變成一條直線_表單按鈕特效

表單按鈕特效Rss訂閱特效代碼搜索

表單按鈕特效推薦

猜你也喜歡看這些