仅使用 CSS 样式化输入元素

Question

我想按如下所述设置输入元素的样式。

我通过删除边框属性并单独添加 border-bottom 来做到这一点。但是当我在那里输入文字时，出现了一些边框。

如何在输入聚焦时去除边框？有没有什么办法可以只使用 CSS（就像任何伪元素）而不使用脚本。

<div><span>First Name</span><span class="spacing" style="
    display: inline-block;
    width: 10px;
"></span><input type="text" style="
    border: 0px;
    border-bottom: 1px solid black;
"></div>

Answer 1

在您的 CSS 中，为 input 个元素设置 outline: none;。

input[type="text"] {
    border: none;
    border-bottom: 1px solid black;
    outline: none;
}

input[type="text"]:focus {
    border-color: pink;
}

<div><span>First Name</span><span class="spacing" style="
    display: inline-block;
    width: 10px;
"></span><input type="text"></div>

仅使用 CSS 样式化输入元素

Styling input element using only CSS

css

pseudo-element