CSS例項：橫線樣式的輸入框(轉)

post0發表於2007-08-15
CSS
CSS例項：橫線樣式的輸入框(轉)[@more@]

　　在網上我們常常看見一些登錄檔單的輸入框部分並不是我們常見的矩形框，而是一條細線，很多朋友對此很感興趣。其實要實現這樣的效果並不困難，我們只要用一段簡短的CSS程式碼控制好表單輸入框的樣式即可。

 　　示例如下：

 　　請輸入您的使用者名稱：

　　下面我們就來看看這段實現效果的css程式碼。它主要運用了表格邊框的樣式控制，將左、上、右邊框設定為none，只剩下下邊框即可。

　　<style type="text/css"> 　　 　　</style>

　　樣式表中程式碼解釋如下：

　　“BORDER-LEFT-STYLE:none”： 隱藏左邊框

　　“BORDER-RIGHT-STYLE: none”： 隱藏右邊框

　　“BORDER-TOP-STYLE: none”： 隱藏上邊框

　　“BORDER-bottom-STYLE: none”： 隱藏下邊框。

　　下面讓我們一起來看一個應用例項： 　　 　　 　　<title>橫線式輸入框</title> 　　<style type="text/css"> 　　 　　</style> 　　 　　 　　 　　隱藏的邊框的輸入框： 　　<p>使用者名稱：<input type="text" name="name" class="line"> 　　 　　</p> 　　 　　

　　實現效果簡潔清爽。 

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/8225414/viewspace-957431/，如需轉載，請註明出處，否則將追究法律責任。

相關文章