CSS 控制 input 只显示下划线效果

因为页面设计须要，有时咱们可能会出现只有下划线（底部边框）的input，以下图所示

那么怎么实现这种效果呢？

其实很简单，只要从边框（border）入手就能够了

好比将上、右、左边框宽度设置为0，下边框为1，颜色根据须要调整

border-bottom: 1px solid #dbdbdb;  
border-top:0px;  
border-left:0px;  
border-right:0px;

如上代码，便可实现。