Underlining Text in an <input> Box - html

Question

I've gotten a request from a client to underline text in a text field.
Both single and double lines.
Is this even possible? I assume with some obscure plugin but I haven't found it yet. :P
I've thought about there being 2 possibilities, if this is possible.
Underlining the text in the actual field.
Doing some crazy hack with text just underneath the text field.
Thanks for any help and/or commentary. ^_^

Answer 1

The following works in Chrome 6.0.472.55/Ubuntu 10.04, and Firefox 3.6.9 (also Ubuntu 10.04):
input {text-decoration: underline; }
Though this, obviously, gives only a single-underline.
Quick demo at: jsbin

Answer 2

You could just use a CSS based solution i.e. a CSS selector to underline the text.

Answer 3

Here's a very basic example of how to accomplish this.
Still can't do it out of the box, but fairly 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
}