如何实现label嵌入input框内且输入时隐藏？解决文本重叠问题

方案一：基于现有结构修改CSS（推荐，保留语义化） #

通过CSS伪类监听输入框的聚焦和内容状态，就能控制label的显示/隐藏。修改后的代码如下：

HTML（仅补充语义化属性） #

<div class="holder">
    <label for="username">username</label>
    <input type="text" id="username" placeholder=" ">
</div>

说明：给input加id并关联label的for属性，保证可访问性；空placeholder是为了兼容:placeholder-shown伪类，确保输入框有内容时能触发状态变化。

修改后的CSS #

.holder {
    position: relative;
}

.holder label {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    pointer-events: none; /* 避免点击输入框时触发label事件 */
    transition: all 0.2s ease;
    /* 去掉原有的width/height限制，让label自适应文字宽度 */
}

.holder input {
    padding: 8px;
    height: 32px;
    box-sizing: border-box;
    /* 无需左侧额外padding，label通过绝对定位覆盖在输入框内 */
}

/* 输入框聚焦或有内容时隐藏label */
.holder input:focus + label,
.holder input:not(:placeholder-shown) + label {
    opacity: 0;
    visibility: hidden;
}

方案二：结合HTML5 placeholder（简化实现） #

如果仅需要输入框内的提示文字，可直接用placeholder属性，但要注意placeholder不能替代label的语义化作用，建议保留隐藏的label供屏幕阅读器识别：

<div class="holder">
    <label for="username" class="sr-only">username</label>
    <input type="text" id="username" placeholder="username">
</div>

/* 视觉隐藏但屏幕阅读器可见的类 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

方案三：标签上浮效果（进阶替代方案） #

不想完全隐藏label的话，可以让它上浮到输入框上方（类似Material Design风格），既不遮挡输入内容，又保留提示：

.holder {
    position: relative;
}

.holder label {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    pointer-events: none;
    transition: all 0.2s ease;
    background: #fff; /* 用背景覆盖输入框边框，避免文字被截断 */
    padding: 0 4px;
}

.holder input {
    padding: 8px;
    height: 32px;
    box-sizing: border-box;
    border: 1px solid #ddd;
}

.holder input:focus + label,
.holder input:not(:placeholder-shown) + label {
    top: 0;
    transform: translateY(-50%);
    font-size: 12px;
    color: #333;
}

内容的提问来源于stack exchange，提问作者Jasir Limani