代码之家 › 专栏 › 技术社区 › Zabba fl00r

通过CSS将__Required_文本添加到HTML表单

forms css html

Zabba fl00r · 技术社区 · 14 年前

我有一个 <form> 看起来是这样的:

<form>
  <input type="text" name="name" id="name" /><span class="required"></span>
</form>

我要做的是显示一些文本,例如 * 或 Required 在 <span> 元素,而不是“硬编码”每一个这样的地方的文本,我需要的文本,使表单看起来像这样:

[input box] Required

我搜索了一下,发现可以用CSS样式 content 例如:

.required:before
{
  content: "aaaa"
}

但是,我应该使用这种技术(例如,在每个主要浏览器中都支持它)还是有一种更好的方法来做这种事情?

谢谢

更新我不想用JavaScript来做这个,只是简单的CSS。

7 回复 | 直到 14 年前

Pekka 14 年前

我同意在大多数情况下使用CSS添加内容是不正确的。但是,用视觉突出显示一个我认为完全可以这样做的必需字段。

content 支持不够广泛(即根本不支持IIRC)。

你什么能够 Do是让“必需”范围包含包含“必需”文本或星号的背景图像。使用图形文本有一些缺点,但是基于jQuery的解决方案也没有这样的缺点。

Pranay Rana 14 年前

检查以下内容: content

请检查此兼容性

不要使用

我觉得我们根本不应该使用内容声明。它向页面添加内容,而css则用于向页面添加演示文稿,而不是内容。因此,如果您想动态生成内容,我觉得应该使用javascript。CSS是此作业的错误工具。

请检查此兼容性

不要使用

我觉得我们根本不应该使用内容声明。它向页面添加内容,而css则用于向页面添加演示文稿,而不是内容。因此,如果您想动态生成内容,我觉得应该使用javascript。CSS是此作业的错误工具。

Thomas Clayson 14 年前

绝对不应该用CSS来完成这个任务!天哪!P

如前所述,使用javascript——但是如果你想避免这种情况,那么你必须使用服务器端脚本——所以学习一些PHP。

Felix Kling 14 年前

你可以使用jquery来处理这个问题。

jquery是一个javascript库:

在标题中写入此代码

$(document).ready(function(){
  $(span[class=required]).innerText='<sometext>';
});

但你必须下载这个插件。但是你也可以使用javascript

Mark Chorley 14 年前

正如其他人所指出的,CSS可以做到这一点,但它并没有得到充分的支持,而且它也不是解决这个问题的正确方法。如果“必需”文本的出现是绝对关键的,那么您必须将其添加到HTML中。在某种程度上,JavaScript是一个合适的解决方案,但前提是您不能编辑源代码。虽然内容可以使用JS生成,但显然只有启用了JavaScript的人才能看到,这增加了维护的复杂性。当有人在五年的时间里在页面上进行代码更改时,他们开始想知道“必选”文本是从哪里来的。

另一个相当快速和整洁的选择是给跨度一个星号的背景图像,并在表单上方包含一个键: