1

我正在创建一个 HTML5 表单，并且我在除 Chrome 之外的所有现代浏览器中都可以使用以下 css：

input:focus:required:invalid:after, textarea:focus:required:invalid:after { content: "!"; font-size: 20px; margin: -18px 0 4px 0; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75); display: block; float: right; color: #c40000; }

input:focus:required:valid:after, textarea:focus:required:valid:after { content: "\2713\0020"; font-size: 20px; margin: -18px -4px 4px 0; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75); display: block; float: right; color: #009c00; }

当输入文本无效时，这应该显示一个感叹号（！）和一个复选标记（✓），就像在所有其他浏览器中一样，但由于某种原因 Chrome 不喜欢它。

我已经尝试按照此处的建议使用 :before 伪，但它也不起作用。css 出现在 Chrome 的开发者工具样式中，但没有任何显示。请不要建议说“为什么不使用小图像而不是实际字符”，因为这是不可接受的。非常感谢所有其他建议！:)

4

2 回答 2

2

这是因为您不应该在替换的内容上使用伪元素，因为它的内容不是由 CSS 定义的，而是在大多数情况下由操作系统定义（对于表单元素）。因此，我可以想象浏览器之间的实现会有所不同。

从生成和替换的内容模块：

被替换的元素没有 '::before' 和 '::after' 伪元素；在替换内容的情况下，'content' 属性会替换元素框的全部内容。

于 2013-06-05T16:06:13.297 回答
1

我想我必须使用一些 jquery 才能让它在 Chrome 和所有其他浏览器中工作：http: //api.jquery.com/after/

或完全偏离 :after 伪类，只需将所需的输入框设为红色或其他东西。

于 2013-06-05T18:12:33.630 回答