0

我正在制作的表单有两个问题，第一个是我想在表单上添加一些 CSS。这适用于我的<textarea>盒子，因为它有一个结束标签，您可以将文本放在两者之间。<input>另一方面，标签必须通过标签获取文本，value=""这不会响应我的任何 CSS 尝试。

其次，我想知道是否可以在单击该框后自行清除。（不确定 HTML 表单是否支持）

这是带有css的表单的链接，因此您可以看到问题。http://jsfiddle.net/D39rr/5/

4

2 回答 2

1

您正在寻找placeholder属性：

<input placeholder="Your email address" />

JS 小提琴演示。

要设置文本样式placeholder（在兼容的浏览器中）：

::-webkit-input-placeholder,
::-moz-input-placeholder,
::-o-input-placeholder,
::-ms-input-placeholder,
::input-placeholder {
    color: #0f0;
    font-weight: bold;
}

JS 小提琴演示。

要设置文本的样式，无论是来自value属性还是用户输入，只需使用通常color的 、font-style、font-weight等：

input {
    color: #f00;
    font-size: 1.5em;
    font-style: italic;
    font-weight: bold;
}​

JS 小提琴演示。

顺便说一句，textarea正如您正确指出的那样，“有一个结束标签”。因此，它不是一个自关闭（或 void）元素，并且它的开始标签中不应有一个/字符（就像您在链接的 JS Fiddle: 中所做的那样<textarea id="style" name="message" />Type out your question here</textarea>），而应该是：

<textarea id="style" name="message">Type out your question here</textarea>

或者，使用placeholder：

<textarea id="style" name="message" placeholder="Type out your question here"></textarea>

同样值得注意的是，使用placeholder替换 alabel意味着一旦用户将注意力集中在该字段或将数据输入到该字段中，所提供的任何指导都会被显式隐藏。如果您不希望label元素一直可见，那么仅在input聚焦时显示指导的一种方法是：

label {
    display: inline;
    opacity: 0;
    overflow: hidden;
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -o-transition: all 1s linear;
    -ms-transition: all 1s linear;
    transition: all 1s linear;
}

input:focus + label,
input:active + label {
    opacity: 1;
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -o-transition: all 1s linear;
    -ms-transition: all 1s linear;
    transition: all 1s linear;
}​

一旦input聚焦/激活就会触发显示：JS Fiddle demo。

于 2012-08-25T22:04:48.300 回答
1

您正在寻找的是placeholder属性。有关示例和样式信息，请参阅 David Walsh 关于HTML5 Placeholder Styling with CSS的文章。该placeholder属性有很好的支持，除了IE。不过，您可以使用 Javascript 重新创建placeholder属性的效果……我喜欢使用Webshims 库来逐步填充 HTML5 表单功能（包括其他属性，如type="date"和required="required"）。

于 2012-08-25T22:06:16.067 回答