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

最新推荐文章于 2024-05-21 16:06:09 发布

原创最新推荐文章于 2024-05-21 16:06:09 发布 · 1.7k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #input #下划线

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

原生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; }