CSS实例：横线样式的输入框

最新推荐文章于 2023-06-01 14:57:59 发布

haiyun365

最新推荐文章于 2023-06-01 14:57:59 发布

阅读量2.3k

点赞数

文章标签： css class

本文链接：https://blog.csdn.net/haiyun365/article/details/949030

版权

在网上我们常常看见一些注册表单的输入框部分并不是我们常见的矩形框，而是一条细线，很多朋友对此很感兴趣。其实要实现这样的效果并不困难，我们只要用一段简短的CSS代码控制好表单输入框的样式即可。

　　 示例如下：

　　请输入您的用户名：

　　下面我们就来看看这段实现效果的css代码。它主要运用了表格边框的样式控制，将左、上、右边框设置为none，只剩下下边框即可。

  　　&amp;amp;amp;lt;style type=&amp;amp;amp;quot;text/css&amp;amp;amp;quot;&amp;amp;amp;gt; 　　&amp;amp;amp;lt;!-- 　　.line{ 　　　　BORDER-LEFT-STYLE: none; 　　　　BORDER-RIGHT-STYLE: none; 　　　　BORDER-TOP-STYLE: none 　　} 　　--&amp;amp;amp;gt; 　　&amp;amp;amp;lt;/style&amp;amp;amp;gt;

　　样式表中代码解释如下：

　　“BORDER-LEFT-STYLE:none”：隐藏左边框
　　“BORDER-RIGHT-STYLE: none”：隐藏右边框
　　“BORDER-TOP-STYLE: none”：隐藏上边框
　　“BORDER-bottom-STYLE: none”：隐藏下边框。

　　下面让我们一起来看一个应用实例：

  　　&amp;amp;amp;lt;HTML&amp;amp;amp;gt; 　　&amp;amp;amp;lt;head&amp;amp;amp;gt; 　　&amp;amp;amp;lt;title&amp;amp;amp;gt;横线式输入框&amp;amp;amp;lt;/title&amp;amp;amp;gt; 　　&amp;amp;amp;lt;style type=&amp;amp;amp;quot;text/css&amp;amp;amp;quot;&amp;amp;amp;gt; 　　&amp;amp;amp;lt;!-- 　　.line{ 　　　　BORDER-LEFT-STYLE: none; 　　　　BORDER-RIGHT-STYLE: none; 　　　　BORDER-TOP-STYLE: none ; 　　} 　　--&amp;amp;amp;gt; 　　&amp;amp;amp;lt;/style&amp;amp;amp;gt; 　　&amp;amp;amp;lt;!--注：此段为css代码，你还可以在这里设置出其他的样式效果--&amp;amp;amp;gt; 　　&amp;amp;amp;lt;/head&amp;amp;amp;gt; 　　&amp;amp;amp;lt;body bgcolor=&amp;amp;amp;quot;#FFFFFF&amp;amp;amp;quot; text=&amp;amp;amp;quot;#000000&amp;amp;amp;quot;&amp;amp;amp;gt; 　　隐藏的边框的输入框： 　　&amp;amp;amp;lt;p&amp;amp;amp;gt;用户名：&amp;amp;amp;lt;input type=&amp;amp;amp;quot;text&amp;amp;amp;quot; name=&amp;amp;amp;quot;name&amp;amp;amp;quot; class=line&amp;amp;amp;gt; 　　 &amp;amp;amp;lt;!-- 注：class=line 这条语句将你预设的css应用在表单中 --&amp;amp;amp;gt; 　　&amp;amp;amp;lt;/p&amp;amp;amp;gt; 　　&amp;amp;amp;lt;/body&amp;amp;amp;gt; 　　&amp;amp;amp;lt;/html&amp;amp;amp;gt;

　　实现效果简洁清爽