在用户输入后保持输入占位符文本可见

【问题标题】：Keep input placeholder text visible after user input在用户输入后保持输入占位符文本可见
【发布时间】：2018-04-10 01:20:10
【问题描述】：

我想让占位符在输入字段中写入内容后保持可见。

重要：我不想使用任何其他元素来“解决”这个问题，我只想使用输入字段。请只使用 CSS，不要使用 JS 或 jQuery。

【问题讨论】：

您是否想要占位符文本仅保留在您输入的文本后面？是不是有点奇怪？
Already answered
简单地使用 value="Whatever placeholder name you want" 在输入中......类似于
How to keep input placeholder visible when user is typing的可能重复

标签： html css

【解决方案1】：

在class ="placeholder" 上使用data-placeholder 属性：

<div class="placeholder" data-placeholder="New placeholder">
</div>

在 Css 中：

.placeholder {
    position: relative;
}

.placeholder::after {
    position: absolute;
    left: 10px;
    top: 2px;
    content: attr(data-placeholder);
    pointer-events: none;
    opacity: 0.5;
}

这里是JSfiddle

【讨论】：