<input> 框中的文本下划线答案

【问题标题】：Underlining Text in an <input> Box<input> 框中的文本下划线
【发布时间】：2011-04-10 12:48:51
【问题描述】：

我收到客户的请求，要求在文本字段中为文本添加下划线。单线和双线。

这甚至可能吗？我假设有一些不起眼的插件，但我还没有找到它。 :P

如果可能的话，我考虑过有两种可能性。

在实际字段中的文本下划线。
对文本字段下方的文本进行一些疯狂的修改。

感谢您的帮助和/或评论。 ^_^

【问题讨论】：

标签： html double textfield underline

【解决方案1】：

以下适用于 Chrome 6.0.472.55/Ubuntu 10.04 和 Firefox 3.6.9（也是 Ubuntu 10.04）：

input {text-decoration: underline; }

虽然这显然只给出了一个下划线。

快速演示：jsbin

【讨论】：

*找到能完成双下划线的东西。
@bobber205：祝你在搜索中一切顺利，我怀疑它可能会涉及超出我知识范围的 javascript 诡计和黑暗艺术。 ...在这个晚上，无论如何... 打哈欠 =b

【解决方案2】：

您可以只使用基于 CSS 的解决方案，即 CSS 选择器来为文本添加下划线。

【讨论】：

【解决方案3】：

这里有一个非常基本的例子来说明如何做到这一点。

仍然不能开箱即用，但是用一点 Sass 和 JS 做起来相当简单

Codepen example

<h1>Underline search input</h1>
<form class="search">
    <label class="inputs">
        <span class="label-tag">Search</span>
        <input placeholder="Search" type="text" value="">
        <span class="search-highlight"></span>
        <span class="search-highlight-second"></span>
    </label>
    <button type="submit"> Search </button>
</form>

form {
    label {
        position: relative;

        .label-tag {
            display: none;
        }

        .search-highlight, .search-highlight-second {
            user-select: none;
            border-top: 1px solid #75d46b;
            position: absolute;
            left: 0;
            bottom: -2px;
            max-width: 100%;
            height: 0;
            color: transparent;
            overflow: hidden;
        }

        .search-highlight-second {
            bottom: -4px;
        }

        input {
            border: none;

            &:focus {
                outline: none;
            }
        }
    }


    button {
        display: block;
        margin-top: 10px;
    }
}

const input = document.querySelector('input');
const highlightEl = document.getElementsByClassName('search-highlight')
const highlightElTwo = document.getElementsByClassName('search-highlight-second')

input.oninput = handleInput;

function handleInput(e) {
    console.log(e.target.value)
    highlightEl[0].innerHTML = e.target.value
    highlightElTwo[0].innerHTML = e.target.value
}

【讨论】：