最近做一个自定义视觉效果的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. 开源OA系统启动:基础数据,工作流设计

    原文:http://www.cnblogs.com/kwklover/archive/2007/01/13/bpoweroa_03_baseandworkflowdesign.html自从开源OA系统 ...

  2. LAMP动态网站安装脚本

    #!/bin/bash #auto make install LAMP #by authors zhangjianghua #httpd define path variable H_FILES=ht ...

  3. 关于51单片机IO引脚的驱动能力与上拉电阻

    单片机的引脚,可以用程序来控制,输出高.低电平,这些可算是单片机的输出电压.但是,程序控制不了单片机的输出电流. 单片机的输出电流,很大程度上是取决于引脚上的外接器件. 单片机输出低电平时,将允许外部 ...

  4. 请求报文&响应报文

    转自黑马程序员视频教程

  5. Andorid 生成NDK动态链接库 .so库

    .so库第一次见到是在搜索Android保存静态秘钥等特殊id字段做法时看到的-通过NDK的方式将静态秘钥保存在so文件中, 关于原生开发工具包(NDK)详细见官网指南要更详细,这里我记录我度娘各种结 ...

  6. dict的特性和基本语法——python3.6

    特性 key:value结构,字典中的每一个元素,都是键值对 key必须可被hash,且必须为不可变数据类型,必须唯一 可存放任意多个值,可修改,可以不唯一 无序 查找速度快,因为hash可以把key ...

  7. install chrome on ubuntu14.04

    summary chrome broswer can't found in ubuntu14.04 default source list.To install chrome ,you must ad ...

  8. 【Luogu】P2495消耗战（虚树DP）

    题目链接 我虚树没很理解啊qwq 就是我们有比较少的询问点,然后我们把不需要考虑的点搞一搞扔掉,然后每次询问给那些询问点单独建一颗树,然后乱搞. ……好吧看来是完全没理解…… 链接大法qwq #inc ...

  9. Resource 定位、BeanDefinition 的载入和解析，BeanDefinition 注册。

    在前文提过,IOC 容器的初始化过程分为三步骤:Resource 定位.BeanDefinition 的载入和解析,BeanDefinition 注册. Resource 定位.我们一般用外部资源来描 ...

  10. BZOJ3992 [SDOI2015]序列统计 【生成函数 + 多项式快速幂】

    题目 小C有一个集合S,里面的元素都是小于M的非负整数.他用程序编写了一个数列生成器,可以生成一个长度为N的数 列,数列中的每个数都属于集合S.小C用这个生成器生成了许多这样的数列.但是小C有一个问题 ...