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

Question

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

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

Answer 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