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

zhige@

于 2021-05-14 13:30:46 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

文章标签： css html input 下划线

本文链接：https://blog.youkuaiyun.com/nyasm/article/details/116788413

本文介绍了如何通过CSS样式来修改input元素的边框，以达到只显示下划线并消除点击时边框的效果。示例代码展示了如何设置border属性和:focus伪类以实现透明背景和无边框的输入框，同时确保选择文本时背景透明。

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

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

使用css改变input的属性即可，代码如下

		input {
            border-bottom: 1px solid #000;
            border-top: 0;
            border-left: 0;
            border-right: 0;
            outline:none;
            background:transparent;
            outline:medium;
        }
        *:focus {
            outline: none;
            background-color: transparent;
        }
        ::selection{background:transparent; }
        ::-moz-selection{background:transparent; }