如何将文本放入文本输入的背景中？答案

【问题标题】：How to put a text into the background on a text input?如何将文本放入文本输入的背景中？
【发布时间】：2014-01-19 17:24:31
【问题描述】：

我有一个输入，用户将在其中放置一些他们的汽车。什么时候有新动作，然后在输入中显示“车号”的占位符文本。

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

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

谢谢

【问题讨论】：

标签： html css image input background

【解决方案1】：

在input 上使用 Z 堆叠和透明背景来伪造它：

<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.

【讨论】：

【解决方案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;
}

以上大部分内容都是风格，但重要的部分是标签的负边距和输入的填充。如果您没有在输入上放置足够大的 padding-right，那么文本将与标签重叠。

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

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/

【讨论】：

【解决方案3】：

使用 HTML 占位符。

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

这将显示文本框内的文本。(Fiddle)

【讨论】：

【解决方案4】：

使用价值

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

希望这会有所帮助:)

【讨论】：