通过CSS将"必需"文本添加到HTML表单

Question

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

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

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

[input box] Required

我用Google搜索并发现它可以通过CSS样式完成,content例如:

.required:before
{
  content: "aaaa"
}

但是,我应该使用这种技术(例如,它是否在每个主要浏览器中都受支持)还是有更优选的方式来做这种事情？

谢谢

UPDATE Ps.我不想为此使用JavaScript,只是简单的CSS.

Answer 1

检查一下: 内容

aslo检查这种兼容性替代文字

不要用

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

我不认为我认为不应该使用它,因为它会在页面中添加"内容".添加一点"必需"模糊不仅仅是CSS已经传达的背景图像,图标或信息颜色的内容.它不应该用于插入段落,但对于这样的东西,我认为它在语义上非常合适.那说...... IE不太支持它.我要做的是使用darn标签,然后我们JS只在破碎的浏览器中修复它. (5认同)

Answer 2

我同意在大多数情况下使用 CSS 添加内容是不正确的。然而，从视觉上突出显示必填字段，我发现这样做完全可以。

content没有得到足够广泛的支持（IE 根本不支持 IIRC）。

您可以做的是让“必需”范围包含包含“必需”文本或星号的背景图像。使用图形文本有一些缺点，但基于 jQuery 的解决方案也有这些缺点。