Подчеркивая текст в коробке <ввода>

Question

Я получил запрос от клиента, чтобы подчеркнуть текст в текстовом поле. Как одиночные, так и двойные линии.

Это даже возможно? Я предполагаю, что с некотором неясным плагином, но я еще не нашел. :П

Я думал о том, что существуют 2 возможности, если это возможно.

1. Подчеркивая текст в реальном поле.
2. Делая сумасшедший взлом с текстом только под текстовым полем.

Спасибо за любую помощь и / или комментарию. ^ _ ^

Answer 1

Следующие работы в Chrome 6.0.472.55/ubuntu 10.04 и Firefox 3.6.9 (также Ubuntu 10.04):

input {text-decoration: underline; }

Хотя это, очевидно, дает только одну подчеркивание.

Быстрая демонстрация по адресу: jsbin.

Answer 2

Вы можете просто использовать решение на основе CSS, т.е. селектор CSS для подчеркивания текста.

Answer 3

Вот очень основной пример того, как это достичь.

До сих пор не могу сделать это из коробки, но довольно просто сделать с небольшим количеством SASS и JS

Пример кодепена

<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
}