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

只需要设置input的边框属性，设置底边框颜色为黑色即可

input{border-bottom: 1px solid #000;border-top: 0px;border-left: 0px;border-right: 0px;
}

效果图

图中显示的下划线就是可以输入的input。

注：有小伙伴说选中后会有默认样式，可以加上outline: none实现选中时不显示默认的框

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

CSS 控制 input 只显示下划线效果
由于页面设计需要,有时我们可能会出现只有下划线(底部边框)的input,如下图所示那么怎么实现这种效果呢? 其实很简单,只要从边框(border)入手就可以了比如将上.右.左边框宽度设置为0,下边 ...
CSS 控制 input 只显示下划线效果 1
由于页面设计需要,有时我们可能会出现只有下划线(底部边框)的input,如下图所示那么怎么实现这种效果呢? 其实很简单,只要从边框(border)入手就可以了比如将上.右.左边框宽度设置为0,下边 ...
html隐藏input边框线,html中去掉文本框(input type=text)的边框或只显示下边框
去掉: 只留下边框: CSS - input 只显示下边框 CSS 样式 : border:none; border-bottom: 1px solid #000 文本框input:text ...
Web开发——HTML基础（HTML表单/下拉列表/多行输入）
参考: 参考:http://www.w3school.com.cn/html/html_forms.asp 目录: 1.<form> 元素 1.1 <input> 元素(输入属 ...
vue表单实现输入框控制输入小数点后两位
首先思路要清晰,如何控制只输入两位小数 1.我们可以把小数点后面的数字长度用maxlength来控制 2.要做到上一步,可以通过split('.')这个方法,以·来将字符串分割成数组 3.拿到数组的第 ...
表单验证：文字输入不超过8个汉字或者16个字符
表单验证:文字输入不超过8个汉字或者16个字符,允许混合输入方法:利用字符串的replace方法,用正则表达式将汉字替换为两个字符,计算总字符数是否大于16 这里的'01'代表两个字符,可以是00, ...
CSS - 鼠标移入悬停显示下拉菜单（导航栏鼠标经过 hover 时出现二级菜单）
前言该效果很常见,网上的代码都非常的乱,样式改起来非常难受. 本文提供 "最简洁" 的解决方案与干净整洁的代码,一眼看过去就知道改哪里, 配合 Vue.js 项目非常合适,如下图 ...
PHP 表单处理和用户输入
目录 PHP 中的 $_GET 和 $_POST 变量用于检索表单中的信息,比如用户输入. PHP 表单处理: welcome.php 文件代码: 通过浏览器访问演示如下: PHP 获取下拉菜单的数据 ...
Bootstrap 表单控件一（单行输入框input，下拉选择框select ，文本域textarea）
单行输入框,常见的文本输入框,也就是input的type属性值为text.在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootst ...

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

只需要设置input的边框属性，设置底边框颜色为黑色即可

效果图

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

最新文章

热门文章