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

Y3G 发布于2019-08-29 11:21 / 2432人阅读

摘要：由于页面设计需要，有时我们可能会出现只有下划线底部边框的，如下图所示那么怎么实现这种效果呢其实很简单，只要从边框入手就可以了比如将上右左边框宽度设置为，下边框为，颜色根据需要调整如上代码，即可实现。

由于页面设计需要，有时我们可能会出现只有下划线（底部边框）的input，如下图所示

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

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

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

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

如上代码，即可实现。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111596.html

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

摘要：由于页面设计需要，有时我们可能会出现只有下划线底部边框的，如下图所示那么怎么实现这种效果呢其实很简单，只要从边框入手就可以了比如将上右左边框宽度设置为，下边框为，颜色根据需要调整如上代码，即可实现。由于页面设计需要，有时我们可能会出现只有下划线（底部边框）的input，如下图所示 showImg(https://segmentfault.com/img/bVDDVL?w=477&h=...

Caizhenhao 2019-08-01 15:47 评论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