Question

我正在尝试为HTML5中的<input>提供一些好的默认样式，并尝试了以下内容：

input::after         { display: inline; }
input:valid::after   { content: ' ✓ '; color: #ddf0dd; }
input:invalid::after { content: ' ✗ '; color: #f0dddd; }

唉，::after内容从未出现过。伪元素的双冒号与单冒号不是问题;我试过了两个。拥有伪元素和伪类也不是问题;我在没有:valid和:invalid的情况下尝试过。我在Chrome，Safari和Firefox中都有相同的行为（Firefox没有:valid和:invalid伪类，但我没有那些尝试过。）

伪元素在<div>，<span>，<p>和<q>元素上运行良好 - 其中一些是块元素，一些是内联的。

所以，我的问题是：为什么浏览器同意<input>没有::after？我在规范中找不到任何可以表明这一点的内容。

Answer 1

正如您可以在此处阅读http://www.w3.org/TR/CSS21/generate.html，：仅适用于具有（文档树）内容的元素。 <input>没有内容，<img>或<br>。

Answer 2

您可以在元素之前或之后放置一个范围。 E.g：

<style>
  #firstName:invalid+span:before {
    content: "** Not OK **";
    color: red;
  }
  
  #firstName:valid+span:before {
    content: "** OK **";
    color: green;
  }
</style>

<input type="text" 
    name="firstName" 
    id="firstName" 
    placeholder="John" 
    required="required" 
    title="Please enter your first name (e.g. John )" 
/><span>&nbsp;</span>

Answer 3

Webkit允许你在输入元素之后执行::。如果你想要一种让它在Firefox中运行的方法，你可以尝试在输入的标签上使用:: after而不是输入本身。

哪些元素支持:: before和:: after伪元素？

3 个答案: