html把输入的文本框变成一个下横线css样式

作者：Liaodeity - 2016年06月12日

这个一个非常简单的效果，就是将input的输入框，变成一条横线的效果，这样在一些界面处理中，更加的好，而不是一个输入框。

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>form元素特殊效果</title>
<style type="text/css">
   #text{
       border-bottom:#666 1px solid;
       border-left-width:0px;
       border-right-width:0px;
       border-top-width:0px;}
  #submit{
      /*
      border: #666 1px solid;显示边框*/
      border:0;
      line-height:20px;
      background-color:transparent;}
</style>
</head>

<body>
<input type="text" name="text"  id="text" />
<input type="submit" value="提交" name="submit" id="submit" />
</body>
</html>

本文作者： Liaodeity

本文链接： https://www.jianbaizhan.com/article/444

版权声明：本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！