Question

我正在创建一个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只是不喜欢它。

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

Answer 1

那是因为你不应该在replaced content上使用伪元素，因为它的内容不是由CSS定义的，而是大多数情况下的操作系统（对于表单元素）。我想，由于这个原因，浏览器的实现会有所不同。

来自Generated and Replaced Content Module:

替换元素没有':: before'和':: after'伪元素;在替换内容的情况下，'content'属性替换元素框的整个内容。

Answer 2

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

或者完全偏离：伪后类，只需要输入需要红色的输入框。

：在除Chrome以外的所有现代浏览器中伪后无效

2 个答案: