html - 如何将文本放入文本输入的背景中？

Question

我有一个输入，用户可以在其中输入他们的汽车编号。什么时候有新 Action ，然后在输入中出现一个占位符文本，上面写着“车号”。

但是当用户编辑汽车信息时，没有占位符，只有用户在表单中输入的数字。我想提醒他们，这个输入是用来设置“车号”的，如下图所示:

但是如何在输入的背景上放置文本呢？我知道如何在背景上放置一张图片，但是有什么办法可以在上面放一个文本标签吗？

谢谢

Answer 1

只需在 input 上使用 Z-stacking 和透明背景来伪造它:

<div class="car">
    <label for="carnr">Car Number</label>
    <input id="carnr" name="carnr" type="number">
</div>

CSS:

.car {
    position:relative;
}
.car input {
    background:transparent;
    border:1px solid #ccc;
    border-radius:3px;
    width:400px;
    padding:4px 4px;
}
.car label {
    color:red;
    font-weight:bold;
    position:absolute;
    margin-top:3px;
    width:380px;
    text-align:right;
}

Sample here .