Question

如何将文字设为<input type="text">的背景它不应该是占位符。但总是可见的。
例如：

| 'from：'用户在此处输入日期|

Answer 1

如果您的意思是占位符文字，请尝试<input type="text" placeholder="Hint Text!">

但是，如果需要持久性文本，那么可以试试这个：http://jsfiddle.net/j8SXZ/

编辑：使用更新的问题this is exactly what you're looking for。

更新：有关背景颜色的评论/反馈 - http://jsfiddle.net/Debloper/j8SXZ/3/

Answer 2

您可以随时将文本和文本字段包装在div中，然后将整体内容设置为文本字段。

所以使用这个HTML：

<div>
    <label id="lead" for="from">From: </label>
    <input id="from" type="text" />
</div>

这个造型：

div {
    background-color: white;
    border: 2px inset;
    cursor: auto;
    width: 250px;
}
label {
    color: gray;
}
input, input[type="text"], input:focus {
    border: none;
    outline: none;
}

会导致this JSFiddle demo。（在Chrome和FF中测试过。）

修改

由于OP表明他正在寻找使用JQuery UI日期选择器，因此必须稍微调整解决方案以允许标签和文本字段触发日期选择器。这非常简单，并在this question中进行了介绍。

必须更改HTML以将类名添加到“wrap”div：<div class="extended-textfield">。这是因为日期选择器本身也包含在<div>中，并且CSS样式的过于通用会导致各种令人讨厌的样式冲突。

div的CSS选择器将更改为div.extended-textfield。

JavaScript：

$( "#from" ).datepicker(); $("#lead").click(function() { $("from").datepicker('show'); });

工作演示为here。

Answer 3

可能会让您满意的几个例子[1]。

第一个示例使用CSS内容，即文本由CSS定义，并通过CSS伪元素插入。请注意，表单元素本身不应生成伪元素，因此必须使用包装器。
第二个示例使用标签的实际内容来提供文本。

技巧的本质是为输入提供透明背景和绝对位置，在相似尺寸的包装中，位置设置为相对位置，以便将其立即放置在下面的任何内容之上，并让它闪耀通过

[1] http://codepen.io/barneycarroll/pen/bizIm

如何将文本设置为输入类型=“文本”的背景？

3 个答案: