CSS 控制 input 只顯示下劃線效果

青葉發表於2016-09-27
CSS

由於頁面設計需要，有時我們可能會出現只有下劃線（底部邊框）的input，如下圖所示

圖片描述

那麼怎麼實現這種效果呢？

其實很簡單，只要從邊框（border）入手就可以了

比如將上、右、左邊框寬度設定為0，下邊框為1，顏色根據需要調整

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

如上程式碼，即可實現。

相關文章