最近做一个自定义视觉效果的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 居然不支持伪元素。

input 对伪元素(:before :after)的支持情况的更多相关文章

  1. CSS :befor :after 伪元素的妙用

    本篇重点介绍CSS中的:befor.:after创建的伪元素几种使用场景,如填充文本.作为iconfont.进度线.时间线以及几何图形. 1. 介绍 1.1 说明 CSS中的:befor.:after ...

  2. 深入学习css伪类和伪元素及其用法

    前言 CSS的伪类和伪元素在平时的代码中经常会出现,可是一旦别人问你,什么是伪类,什么是伪元素,可能还是不能完整的表述出来,下面我们来一探究竟. 伪类和伪元素定义 伪类用于在页面中的元素处于某个状态时 ...

  3. CSS选择器之伪类选择器（伪元素）

    selection [CSS4]应用于文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分).(IE8及以下不支持)(火狐-moz-selection) first-line 选择每个 < ...

  4. CSS——伪元素与伪类

    伪类与伪元素 伪类:在特殊性中占据0,0,1,0 :link 向未访问的链接添加特殊的样式.也就是说,链接所指的 URI 尚未出现在用户代理的历史中.这种状态与 :visited状态是互斥的. :vi ...

  5. ::before和:after中的的双冒号和单冒号有什么区别及这两个伪元素的作用

    ::before和:after中的的双冒号和单冒号有什么区别及这两个伪元素的作用 单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素(伪元素由双冒号和伪元素名称组成),为了兼容已有的伪元素 ...

  6. 手机uc不支持伪元素使用animation动画；移动端background-attachment:fixed不兼容性

    20170503 1.手机uc不支持伪元素使用animation动画 (暂未解决) 2.移动端background-attachment:fixed不兼容性,没有任何效果, element:befor ...

  7. 【CSS进阶】伪元素的妙用--单标签之美

    最近在研读 <CSS SECRET>(CSS揭秘)这本大作,对 CSS 有了更深层次的理解,折腾了下面这个项目: CSS3奇思妙想 -- Demo (请用 Chrome 浏览器打开,非常值 ...

  8. 【CSS进阶】伪元素的妙用2 - 多列均匀布局及title属性效果

    最近无论是工作还是自我学习提升都很忙,面对长篇大论的博文总是心有余而力不足,但又不断的接触学习到零碎的但是很有意义的知识点,很想分享给大家,所以本篇可能会很短. 本篇接我另一篇讲述 CSS 伪元素的文 ...

  9. 浅谈css的伪元素::after和::before

    css中的::after和::before已经被大量地使用在我们日常开发中了,使用他们可以使我们的文档结构更加简洁.但是很多人对::after和::before仍不是特别了解,究竟他们是做什么的?如何 ...

随机推荐

  1. vss安装注意点

    一:装好IIS 二:win7用管理员权限打开 server configuration 才能打上勾 三:用计算机名,不要用 Ip地址

  2. HashMap的C++实现

    #include <iostream> #include <cstring> #include <string> typedef unsigned int SIZE ...

  3. 《Effective Java》笔记 ：（一）创建和销毁对象

    一 .考虑用静态工厂方法代替构造器 1. 静态工厂方法与设计模式中的工厂方法模式不同,注意不要混淆 例子: public static Boolean valueOf(boolean b){ retu ...

  4. Java学习ing

    ConcurrentHashMap从JDK1.5开始随java.util.concurrent包一起引入JDK中,主要为了解决HashMap线程不安全和Hashtable效率不高的问题. Concur ...

  5. PreResultListener

    PreResultListener是要给监听器接口,他可以在Action完成控制处理之后,系统转入实际的物理视图之间被回调. Struts 2 可以由ActionInvocation的addPreRe ...

  6. Response.End报错

    以下摘抄自博问:https://q.cnblogs.com/q/31506/       try catch中使用Response.End() 我在WebForm中用ajax发送请求到页面index. ...

  7. map/set/object/array对比

    map () { //数据结构横向对比, 增,查,改,删 let map = new Map() let array = [] //增 map.set('t',1) array.push({t:1}) ...

  8. 图标字体iconfont的使用

    什么是iconfont? iconfont就是字面上的意思,叫做"字体图标",将一套图标集以字体文件的形式封装,并通过 CSS 的 @font-face 作为 Web Font 调 ...

  9. 二进制<2>

    位运算简介及实用技巧(二):进阶篇(1) =====   真正强的东西来了!   ===== 二进制中的1有奇数个还是偶数个    我们可以用下面的代码来计算一个32位整数的二进制中1的个数的奇偶性, ...

  10. cf- 297 < b > -- 区间翻转操作的优化

    B. Pasha and String time limit per test 2 seconds memory limit per test 256 megabytes input standard ...