input 对伪元素(:before :after)的支持情况

最近做一个自定义视觉效果的Switch组件，用到了 input:radio 和 label，并在label里用伪元素 :before 模拟状态的切换效果。

但是同事评审的时候说可以不用label，直接用input的微元素就可以实现。之前一直以为input这样的自闭合元素没有伪元素，做了个测试看一下到底有没有。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>input:before 测试</title><style>input:before,input:after {content: '';display: block;width: 10px;height: 10px;outline: 1px solid red;}input:after {width: 15px;height: 5px;outline-color: blue;}</style>
</head>
<body><div>button <input type="button"></div><div>color <input type="color"></div><div>date <input type="date"></div><div>datetime-local <input type="datetime-local"></div><div>email <input type="email"></div><div>file <input type="file"></div><div>hidden <input type="hidden"></div><div>image <input type="image"></div><div>month <input type="month"></div><div>number <input type="number"></div><div>passwork <input type="password"></div><div>range <input type="range"></div><div>reset <input type="reset"></div><div>search <input type="search"></div><div>submit <input type="submit"></div><div>text <input type="text"></div><div>tel <input type="tel"></div><div>time <input type="time"></div><div>number <input type="number"></div><div>url <input type="url"></div><div>week <input type="week"></div><div>datetime <input type="datetime"></div><div>checkbox <input type="checkbox"></div><div>radio <input type="radio"></div>
</body>
</html>

input 伪元素支持情况

在 mac Chrome 里打开查看的效果如图：

可以看出来有的input支持有的不支持。让人比较诧异的是 input:button 居然不支持伪元素。

转载于:https://www.cnblogs.com/muge10/p/7891301.html

input 对伪元素(:before :after)的支持情况相关推荐

【CSS】457- CSS 伪元素指南
层叠样式表(css)是一种独立的语言,用于描述web应用程序的表示.这涉及到诸如颜色.字体和HTML元素布局的完全控制等概念. 在本文中,将为您介绍级联样式表中的伪元素,以及如何将它们与兼容性一起使用 ...
细数CSS伪元素及其用法
引言 CSS中有两个很常见的概念,伪类和伪元素. 伪类用于在页面中的元素处于某个状态时,为其添加指定的样式. 伪元素会创建一个抽象的伪元素,这个元素不是DOM中的真实元素,但是会存在于最终的渲染树中, ...
web前端入门学习 css（8）（新增语义化标签、video/audio、新增input类型、新增表单属性、属性选择器、结构伪类选择器、伪元素选择器、css3盒子模型、模糊、calc函数、过渡
https://www.bilibili.com/video/BV1pE411q7FU?p=276 文章目录 html5新特性 html5新增语义化标签 header头部 nav导航 article内 ...
[css] 有哪些标签是不支持伪元素的？
[css] 有哪些标签是不支持伪元素的? 首先我们要知道伪元素有哪些: ::after ::before ::first-letter ::fist-line (单双冒号皆可) ::selection ...
【04】HTML5+CSS3：01-HTML5新增标签、多媒体标签、input标签、新增表单属性、CSS3属性选择器、伪元素选择器、2D转换
文章目录 HTML5 第一天一.什么是 `HTML5` 二.`HTML5 ` 新增标签三.多媒体音频标签四.多媒体视频标签五.新增 input 标签六.新增表单属性七.`CSS3 ` 属性 ...
css after支持ie8,CSS使用伪元素:before,:after生成内容及IE兼容问题
1. CSS伪元素(pseudo-element)和伪类(pseudo-class) CSS2.1中的伪类有: :link :visited :hover :focus :acvtive :fir ...
伪元素控制网页表单样式
当开发web应用程序时,表单样式是个头疼的问题.以前,web开发人员不得不接受一个现实,就是由客户端浏览器控制表单样式.然而,作者通过伪元素给web渲染引擎添加钩子,就可以控制表单的显示. 然而,所有 ...
CSS：基本概念、选择器、伪类伪元素
基本概念 HTML使用结构化标记的理由:易于建立内容索引.增加文档可用性.增加可访问性.易于维护. 元素(element):文档结构的基础,每个元素生成一个框(box)其中包含元素的内容, 元素的两 ...
css中伪类与伪元素的区别
一:伪类: 1:定义:css伪类用于向某些选择器添加特殊效果. 伪类其实与普通的css类相类似,可以为已有的元素添加样式,但是他只有处于dom无法描述的状态下才能为文档树中的元素添加样式,所以将其称为 ...

input 对伪元素(:before :after)的支持情况

input 对伪元素(:before :after)的支持情况相关推荐

最新文章

热门文章