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

Caizhenhao 發布于2019-08-01 15:47 / 1949人閱讀

摘要：由于頁面設計需要，有時我們可能會出現只有下劃線底部邊框的，如下圖所示那么怎么實現這種效果呢其實很簡單，只要從邊框入手就可以了比如將上右左邊框寬度設置為，下邊框為，顏色根據需要調整如上代碼，即可實現。

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

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

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

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

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

如上代碼，即可實現。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50109.html

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

摘要：由于頁面設計需要，有時我們可能會出現只有下劃線底部邊框的，如下圖所示那么怎么實現這種效果呢其實很簡單，只要從邊框入手就可以了比如將上右左邊框寬度設置為，下邊框為，顏色根據需要調整如上代碼，即可實現。由于頁面設計需要，有時我們可能會出現只有下劃線（底部邊框）的input，如下圖所示 showImg(https://segmentfault.com/img/bVDDVL?w=477&h=...

Y3G 2019-08-29 11:21 評論0 收藏0
CSS 黑魔法小技巧，讓你少寫不必要的JS，代碼更優雅

摘要：利用用和來做表單即時校驗需求讓表單檢驗變得簡單優雅，不需要寫冗長的代碼來校驗設置樣式豐富了表單元素，提供了類似等表單元素屬性。不知細葉誰裁出，二月春風似剪刀。首先，你需要先了解一下漸變的使用技巧。之前不久，由于自己平時涉獵還算廣泛，總結了一篇博客：這些JavaScript編程黑科技，裝逼指南，高逼格代碼，讓你驚嘆不已，沒想到受到了大家的歡迎，有人希望能博主還能整理個 CSS 的一些黑...

Berwin 2019-08-01 17:42 評論0 收藏0
CSS 黑魔法小技巧，讓你少寫不必要的JS，代碼更優雅

摘要：利用用和來做表單即時校驗需求讓表單檢驗變得簡單優雅，不需要寫冗長的代碼來校驗設置樣式豐富了表單元素，提供了類似等表單元素屬性。不知細葉誰裁出，二月春風似剪刀。首先，你需要先了解一下漸變的使用技巧。之前不久，由于自己平時涉獵還算廣泛，總結了一篇博客：這些JavaScript編程黑科技，裝逼指南，高逼格代碼，讓你驚嘆不已，沒想到受到了大家的歡迎，有人希望能博主還能整理個 CSS 的一些黑...

MASAILA 2019-08-21 16:46 評論0 收藏0
CSS 黑魔法小技巧，讓你少寫不必要的JS，代碼更優雅

摘要：利用用和來做表單即時校驗需求讓表單檢驗變得簡單優雅，不需要寫冗長的代碼來校驗設置樣式豐富了表單元素，提供了類似等表單元素屬性。不知細葉誰裁出，二月春風似剪刀。首先，你需要先了解一下漸變的使用技巧。之前不久，由于自己平時涉獵還算廣泛，總結了一篇博客：這些JavaScript編程黑科技，裝逼指南，高逼格代碼，讓你驚嘆不已，沒想到受到了大家的歡迎，有人希望能博主還能整理個 CSS 的一些黑...

qqlcbb 2019-08-30 15:53 評論0 收藏0