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

最新推荐文章于 2023-11-24 11:45:47 发布

weixin_34293902

最新推荐文章于 2023-11-24 11:45:47 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000007025949

本文介绍了一种实现仅有下划线（底部边框）的input方法，通过设置CSS中input元素的边框属性来达到预期的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

图片描述

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

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

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

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

如上代码，即可实现。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_34293902

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Amazing Css：自定义下划线样式的Input

狗蛋像花儿一样

01-21

1297

Amazing Css：自定义下划线样式的Input 这篇文章将通过CSS的方式实现一个常见的Input样式，包括一些VUE的Tips 效果相比于传统的方框Input同款样式，下划线的input输入框占用版面更小，视觉效果比较灵活，通常可以使表单面板更加整洁。写这样一个输入框的组件只需要一些CSS和少量的JS就可以完成。第一步思考：border 对于带下划线的东西，可能最容易想到的就是bo...

CSS控制链接显示状态的CSS伪类

09-25

在网页设计中，CSS（层叠样式表）是用于控制网页元素显示的重要工具。其中，CSS伪类是一种特别有用的特性，允许我们根据元素的不同状态应用不同的样式。在本主题中，我们将深入探讨如何使用CSS伪类来控制链接的显示...

参与评论您还未登录，请先登录后发表或查看评论

input输入框只显示下划线

gaohuanjie的专栏

04-02

1873

input输入框只显示下划线。

input输入框只显示下划线,去掉边框和阴影

m0_61096379的博客

03-08

3217

::v-deep .ant-input { border-bottom: 2px solid #eee; border-left-width: 0; border-top-width: 0; border-right-width: 0; } ::v-deep .ant-input:focus { border: none; border-bottom: 2px solid #eee !important; box-shadow: none; } ::v...

CSS - input 只显示下边框

weixin_30819085的博客

09-20

1万+

　 CSS 样式： border:none; border-bottom: 1px solid #000 转载于:https://www.cnblogs.com/500m/p/11555838.html

el-input 只展示下划线

m0_55258023的博客

10-20

3923

el-input 只展示下划线

CSS小例子(只显示下划线的文本框，像文字一样的按钮)

10-30

### CSS技巧：实现只显示下划线的文本框与像文字一样的按钮 #### 知识点一：CSS样式实现只显示下划线的文本框在网页设计中，有时我们需要创建一个只显示下划线的文本输入框，这种设计常见于表单中，可以为用户提供...

element-ui el-input只显示下划线

05-18

如果 `el-input` 只显示下划线，可能是由于以下原因： 1. 没有正确引入 Element UI 库。请确保已正确引入 Element UI 库，并且已正确注册组件。 2. 没有设置 `v-model` 属性。请确保在 `el-input` 上设置了 `v-...

input标签只显示下划线

06-10

可能是因为该 input 标签的样式（CSS）被设置为只显示下划线。你可以检查一下该 input 标签的 CSS 样式，看看是否有类似于 `border: none; border-bottom: 1px solid black;` 这样的属性设置，这会使该 input 标签只...

实现html表单下划线可输入/css实现input只显示下划线

热门推荐

cbat的博客

03-29

1万+

只需要设置input的边框属性，设置底边框颜色为黑色即可 input{ border-bottom: 1px solid #000; border-top: 0px; border-left: 0px; border-right: 0px; } 效果图图中显示的下划线就是可以输入的input。 ...

直播源码开发，el-input 只展示下划线

云豹网络科技

02-06

306

以上就是直播源码开发，el-input 只展示下划线，更多内容欢迎关注之后的文章。这种方法确实可以实现效果，简单粗暴，却会造成不同组件样式污染，不建议。直播源码开发，el-input 只展示下划线。如果这样还是不生效，别急，我可以用下面这种。使用 /deep/ 深度修改标签样式。如果你这样操作之后，发现并没有生效。你的输入框只展示下划线，怎么办。解决方案：/deep/

设置el-input只显示下边框

guapilixianghe的博客

06-27

4462

1，设置el-input在一个div里面 2，使用深度选择器

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

weixin_36110344的博客

06-03

3316

这个一个非常简单的效果，就是将input的输入框，变成一条横线的效果，这样在一些界面处理中，更加的好，而不是一个输入框。htmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">form元素特殊效果#text{border-bot...

前端-修改el-input样式只有底部横线显示以及提示文字的样式

最新发布

qq_42371932的博客

11-24

1443

/修改4个边框颜色。//修改底部边框颜色。//Firefox版本4-18。//Firefox版本19+

原生html元素input标签实现下划线输入效果并且点击时不会出现边框

nyasm的博客

05-14

1691

原生html元素input标签实现下划线输入效果并且点击时不会出现边框使用css改变input的属性即可，代码如下 input { border-bottom: 1px solid #000; border-top: 0; border-left: 0; border-right: 0; outline:none; background:transpa.

改变el-input框的样式（去掉边框），及scoped实现原理

weixin_52862941的博客

12-02

6331

当一个style标签拥有scoped属性时候，它的css样式只能用于当前的Vue组件，可以使组件的样式不相互污染。如果一个项目的所有style标签都加上了scoped属性，相当于实现了样式的模块化。

Vue 摘录官网

没有翅膀的我们，只是随便认为不能飞而已

02-22

256

第一次从工作中接触Vue项目，公司学习氛围不错。一边看官网，一边记录注意点所有东西都是响应式的。我们要怎么确认呢？打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.message 的值 app.todos.push({ text: ‘新项目’ })，你会发现列表todos最后添加了一个新项目只有当实例被创建时 data 中存在的属性才是响应式的，所以一开...

el-input保留底部边框

qq_43026206的博客

03-29

1514

el-element只保留底边框