javascript - HTML/CSS - 如何在输入字段末尾显示透明文本片段

Question

在这张来自谷歌计算器输入的图片中，您可以看到右侧的括号没有放置，但已标记，我想知道如何在 HTML 中的输入字段末尾放置一个灰色透明的字符串？

Answer 1

您可以使用 div 而不是 input 框来实现它。

并让 div 看起来像一个文本框。

HTML

<div id='container'>
    <div id='start'>(((((((((((</div>
    <div id='end'>)))))))))))</div>
</div>

CSS

#container {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    background-color: white;
    background-color: -moz-field;
    border: 1px solid darkgray;
    box-shadow: 1px 1px 1px 0 lightgray inset;
    font: -moz-field;
    font: -webkit-small-control;
    display: inline-block;
}
#start {
    display: inline-block;
    color: rgba(0, 0, 0, 1);
}
#end {
    display: inline-block;
    color: rgba(0, 0, 0, 0.4);
}

输出 fiddle .

---

使div可编辑；您可以使用 contenteditable bool 值。 HTML 的外观如下:

<div id='container' contenteditable>
    <div id='start'>(((((((((((</div>
    <div id='end' contenteditable="false">)))))))))))</div>
</div>

还有一个fiddle .