1

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

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

4

3 回答 3

4

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

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

编辑：随着更新的问题，这正是您正在寻找的。

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

于 2012-09-10T17:16:07.163 回答
1

您总是可以将您的文本和文本字段包装在一个 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;
}

将导致这个 JSFiddle 演示。（在 Chrome 和 FF 中测试。）

编辑

由于 OP 表示他希望使用 JQuery UI 日期选择器，因此必须稍微调整解决方案以允许标签和文本字段都触发日期选择器。这很简单，并且在这个问题中有所涉及。

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

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

和 JavaScript：

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

工作演示在这里。

于 2012-09-10T17:47:17.667 回答
0

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

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

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

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

于 2012-09-10T17:46:38.990 回答