添加“必需的”文本通过CSS

HTML表单我有一个<form>，看起来像这样：添加“必需的”文本通过CSS

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

我想要做的是显示出一些文字，在<span>元素如*或Required，而不是“硬编码”为每个该等地方的文本，我需要的文本，以便形式看起来是这样的：

[input box] Required

我GOOGLE了四周，发现它可以通过使用CSS样式来实现如：

.required:before 
{ 
    content: "aaaa" 
}

不过，我应该使用这种技术（它是在例如每一个主要的浏览器支持）或有做这样的事情更优选的方法是什么？

感谢

UPDATE诗篇。我不想为此使用JavaScript，只是普通的CSS。

来源

2010-09-09 Zabba

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

content不被广泛支持（IE在所有IIRC中都不支持它）。

你可能做的是“必需”范围包含一个包含“必需”文本或星号的背景图像。使用图形文本有一些缺点，但没有一个基于jQuery的解决方案也不具备。

来源

2010-09-09 07:09:36

请参阅我的评论@Pranay拉纳以上。如果我使用“background-image”属性，是不是与“content”属性相同，唯一的区别是，在“内容”的情况下，我添加一个字符串和“background-image”我添加图片？ “内容”也不是，但都增加了一些视觉呈现的“数据”，对吧？ – Zabba 2010-09-09 07:25:48

@Zabba严格来说，是的。这与分离内容和表达的理念不符。但是，如果这对你有效，考虑到所有缺点（图形文本在屏幕阅读器中不可读，不会被打印等），我倾向于说它并不重要。 – 2010-09-09 07:30:37

@Zabba：区别在于'background-image'被广泛支持。 – mpen 2010-09-09 07:34:53

我认为你应该看JavaScript。将内容添加到具有特定类/ ID的标记是JavaScript的一个用途。有许多库可以加速开发时间 - jQuery，Prototype，Dojo和MooTools。

来源

2010-09-09 06:59:55 Extrakun

感谢Extrakun，我应该提到我想为此避免使用JavaScript。更新了问题。 – Zabba 2010-09-09 07:03:15

我不认为除JavaScript以外还有其他客户端解决方案。然后你可能想看看服务器端编程，它允许你使用模板和一些简单的编程来复制内容。 – Extrakun 2010-09-09 07:06:06

你可以使用jQuery这个东西。

jQuery是一个JavaScript库：

写在标题此代码

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

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

来源

2010-09-09 07:02:47 AEMLoviji

这是一个完美的解决方案，即使是代码示例：+1。考虑使用“你”而不是“你”，它会让你的写作风格看起来更加成熟 – 2010-09-09 07:53:38

对我来说不起作用（语法错误）。其中一种方法是： $（document）.ready（function（）{ $（'span.required'）。text（'*'）; }）; – jarmod 2013-02-20 16:54:15

绝对不应该使用CSS来做到这一点！上帝不！：p

如上所述使用JavaScript - 但如果你想避免这一点，那么你必须使用服务器端脚本 - 所以学习一些PHP。

来源

2010-09-09 07:05:47

+1处理服务器端 – cjk 2010-09-09 07:07:29

为什么感谢你。 :) – 2010-09-09 07:11:45

我不同意在这个特定的情况下：开始使用服务器端语言来构建表单比一点CSS渲染，比如说星号要容易得多。但总的来说，你是对的。 – 2010-09-09 07:36:19

检查：Content

ASLO检查此兼容性 alt text

不要使用

我觉得我们不应该使用内容的声明都没有。它将内容添加到页面，而CSS则用于向页面添加演示文稿，而不是内容。因此，如果您想动态生成内容，我觉得您应该使用JavaScript。 CSS是这项工作的错误工具。

来源

2010-09-09 07:07:24

微软再次罢工...... :( – 2010-09-09 07:12:35

但是，如果CSS仅用于演示文稿，CSS有内容属性的原因是什么？我使用Google搜索到W3C（http://www.w3.org/TR/2009/CR- CSS2-20090908/generate.html＃propdef-content），它说：“生成的内容不会改变文档树，特别是它不会反馈到文档语言处理器（例如，用于重新分析）”。它是真正的“演示文稿”，而不是添加“内容”的页面，对吗？ – Zabba 2010-09-09 07:22:41

我不认为我买这个论点，它不应该被使用，因为它添加“内容”的页面。所需要的“blurb没有内容超过背景图像，图标或CSS已经传达的信息色彩，不应该用于插入段落，但对于这样的事情，我认为它完全符合语义。 IE不支持它，我会做的是使用darn标签，然后我们JS去fi只有在破碎的浏览器中。 – mpen 2010-09-09 07:33:03

正如其他人所指出的CSS可以做到这一点，但它并没有完全支持，它也不是解决这个问题的正确方法。如果显示“必需”文本至关重要，那么您必须将其添加到HTML中。在某种程度上，Javascript是一个合适的解决方案，但前提是您无法编辑源代码。虽然内容可以使用JS生成，但显然只有启用了JavaScript的用户才会看到，并且增加了维护的复杂性。如果有人在五年的时间内在页面上出现代码更改，他们最初会想知道“所需”文本的来源。

这将是相当快，相当工整将是给跨度星号的背景图像和包括上述表单的关键另外一个选择：

* required field

来源

2010-09-09 07:36:33

我喜欢这部分内容“当有人在五年的时间里查看页面来更改代码” - 谢谢，没有想到那个角度。 – Zabba 2010-09-09 07:44:27

你真的应该在添加此文字HTML。其他解决方案无法访问 - 例如，不具备视力的用户不会意识到该字段是必需的。

来源

2010-09-09 08:14:41

添加“必需的”文本通过CSS

回答

相关问题