Underline text in the <input> block

Question

I received a request from a client to underline the text in a text box. Both single and double lines.

Is it possible? I guess with some obscure plugin, but I haven't found it yet .: P

I thought there are 2 possibilities, if possible.

• Underline text in the actual field.
• Performing a crazy hack with the text under the text box.

Thanks for any help and / or comment. ^ _ ^

Answer 1

On Chrome 6.0.472.55/Ubuntu 10.04 and Firefox 3.6.9 (also Ubuntu 10.04) the following works:

input {text-decoration: underline; } 

Although this obviously gives only one underline.

Quick demo at jsbin

Answer 2

You can simply use a CSS based solution i.e. CSS selector to emphasize text.

Answer 3

Here is a very simple example of how to achieve this.

Still can't do it out of the box, but pretty simple to do with a little Sass and 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 }