我收到了客户的请求,要求在文本字段中为文本加下划线。单线和双线。
这甚至可能吗?我假设有一些不起眼的插件,但我还没有找到它。:P
如果可能的话,我考虑过有两种可能性。
- 在实际字段中为文本加下划线。
- 对文本字段下方的文本进行一些疯狂的修改。
感谢您的任何帮助和/或评论。^_^
以下适用于 Chrome 6.0.472.55/Ubuntu 10.04 和 Firefox 3.6.9(也是 Ubuntu 10.04):
input {text-decoration: underline; }
尽管这显然只给出了一个下划线。
快速演示:jsbin
您可以只使用基于 CSS 的解决方案,即 CSS 选择器来为文本添加下划线。
这是一个非常基本的示例,说明如何完成此操作。
仍然不能开箱即用,但是用一点 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
}