Question

我有一个输入，用户将放置他们的汽车数量。什么时候有新的动作，然后输入一个占位符文本说“车号”。

但是当用户编辑汽车信息时，没有占位符，而是用户放入表单的号码。我想提醒他们，此输入用于设置“车号”，如下图所示： enter image description here

但是如何在输入的背景上放置文本？我知道如何在背景上添加图像，但是有什么方法可以放置文本标签吗？

由于

Answer 1

使用Z-stacking和input上的透明背景伪装它：

<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

Answer 2

您可以使用负边距将标签拉入文本框，但这可能会变得乏味，因为填充和边距的值将根据字符串的长度而变化。

http://jsfiddle.net/T9kpc/

HTML：

<input class="input" type="text">
<label class="placeholder">car number</label>

的CSS：

.placeholder {
    color:#aaa;
    margin-left:-100px; /*the important part*/
    border-left:2px dotted #eee;
    padding-left:10px
}
.input {
    height:30px;
    border-radius:4px;
    width:200px;
    border:1px solid #ddd;
    padding:5px 100px 5px 10px; /*the important part*/
    font-size:16px;
    outline:none;
}

以上大多数都是文体，但重要的部分是标签的负边距和输入的填充。如果你没有在输入上放置足够大的填充权，那么文本将与标签重叠。

我还建议不要使用红色作为标签颜色，因为通常使用表格，红色表示字段错误并且可能会使用户感到困惑。有很多资源可以讨论您可以查看的表单的最佳实践，这里有一些我通过快速搜索找到的表单。

https://ux.stackexchange.com/questions/9220/on-forms-is-inline-placeholder-text-better-than-a-label-outside-each-field

http://uxdesign.smashingmagazine.com/2011/11/08/extensive-guide-web-form-usability/

Answer 3

使用HTML占位符。

<input type="text" placeholder="Car number"/>

这将在文本框中显示文本。（Fiddle）

Answer 4

使用值

    <input name="test" value="i am pre entered text"></input>

希望这有助于：）

如何在文本输入中将文本放入背景中？

4 个答案: