CSS例項 橫線樣式的輸入框

2021-04-08 18:09:27 字數 997 閱讀 2743

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

示例如下:

請輸入您的使用者名稱:

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

<style type="text/css">   <!--   .line   -->   </style>

樣式表中**解釋如下:

「border-left-style:none」: 隱藏左邊框

「border-right-style: none」: 隱藏右邊框

「border-top-style: none」: 隱藏上邊框

「border-bottom-style: none」: 隱藏下邊框。

下面讓我們一起來看乙個應用例項:

<html>   <head>   <title>橫線式輸入框</title>   <style type="text/css">   <!--   .line   -->   </style>   <!--注:此段為css**,你還可以在這裡設定出其他的樣式效果-->   </head>   <body bgcolor="#ffffff" text="#000000">   隱藏的邊框的輸入框:   <p>使用者名稱:<input type="text" name="name" class=line>    <!-- 注:class=line 這條語句將你預設的css應用在表單中 -->   </p>   </body>   </html>

實現效果簡潔清爽

CSS例項 橫線樣式的輸入框

在網上我們常常看見一些登錄檔單的輸入框部分並不是我們常見的矩形框,而是一條細線,很多朋友對此很感興趣。其實要實現這樣的效果並不困難,我們只要用一段簡短的css 控制好表單輸入框的樣式即可。示例如下 請輸入您的使用者名稱 下面我們就來看看這段實現效果的css 它主要運用了 邊框的樣式控制,將左 上 右...

CSS例項 橫線樣式的輸入框

在網上我們常常看見一些登錄檔單的輸入框部分並不是我們常見的矩形框,而是一條細線,很多朋友對此很感興趣。其實要實現這樣的效果並不困難,我們只要用一段簡短的css 控制好表單輸入框的樣式即可。示例如下 請輸入您的使用者名稱 下面我們就來看看這段實現效果的css 它主要運用了 邊框的樣式控制,將左 上 右...

樣式 輸入框 輸入框和表單設計

輸入框允許使用者在 ui 中輸入文字。它們通常出現在表單和對話方塊中。輸入框元件設計應該為互動提供清晰的啟示,使輸入框在布局中易於發現 高效地填充和可訪問。以下是輸入框的基本元素 容器 可互動輸入區 輸入文字 輸入文字字段 標題 告訴使用者這個輸入框該輸入什麼內容 佔位符文字 為使用者提供輸入文字前...