代码之家 › 专栏 › 技术社区 › James A. Rosen

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

pseudo-element forms css html

James A. Rosen · 技术社区 · 15 年前

我正在尝试设计一些好的默认样式 <input> 在HTML5中尝试了以下操作:

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

唉, ::after 内容永远不会出现。伪元素的双冒号和单冒号不是问题,我试过两种方法。拥有一个伪元素和一个伪类也不是问题;我尝试过没有 :valid 和 :invalid . 我在Chrome、Safari和火狐中也有同样的行为(火狐没有 有效的 和 无效 伪类,但我没有那些尝试过。)

伪元素的作用很好 <div> , <span> , <p> 和 <q> 元素——其中一些是块元素,一些是内联的。

所以,我的问题是:为什么浏览器同意 <输入& GT; 没有一个 后: ?我找不到任何说明这一点的规范。

3 回复 | 直到 7 年前

BoltClock 12 年前

你可以在这里读到 http://www.w3.org/TR/CSS21/generate.html ,:after仅用于具有(文档树)内容的元素。 <input> 没有内容,以及 <img> 或 <br> .

cobberboy 7 年前

可以在元素之前或之后放置跨度。例如。:

<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>

Andrew Philpott 14 年前

WebKit允许您在输入元素之后执行::。如果您想让它在Firefox中工作,可以尝试在输入的标签上使用::after,而不是输入本身。

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

11 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

11 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

11 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

11 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

12 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前