最近做一个自定义视觉效果的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. c++，友元类和友元函数

    都是声明时友元的东西可以访问自己类的私有和保护成员 类的友元 友元是C++提供的一种破坏数据封装和数据隐藏的机制. 通过将一个模块声明为另一个模块的友元,一个模块能够引用到另一个模块中本是被隐藏的信息 ...

  2. SQL_4_函数

    在SQL的函数中可以执行一些诸如对某一些进行汇总或将一个字符串中的字符转换为大写的操作等: 函数有:汇总函数.日期与时间函数.数学函数.字符函数.转换函数与其他函数. 汇总函数 这是一组函数,它们返回 ...

  3. 使用Blend的一些问题和技巧

    WPF开发,界面处理首选Blend,如果你开发了两年WPF都没接触过blend(当然这种几率不高),或者你刚接触WPF,可以考虑使用Blend,这货也算得上一个神器,上手也不难.以下有两位讲得不错,大 ...

  4. adb提取安装的apk

    第一步:列出所有安装的apk adb shell pm list packages  然后找到自己要取出来的apk的包名. 第二布:找到apk的位置(后面跟上包名) adb shell pm path ...

  5. activity-alias

    activity-alias标签,它有一个属性叫android:targetActivity,这个属性就是用来为该标签设置目标Activity的,或者说它就是这个目标Activity的别名.至此我们已 ...

  6. 1px的实现

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. mysql update连表

    UPDATE price_air_item t1 LEFT JOIN order_item t2 ON t1.ORDER_ITEM_ID = t2.ORDER_ITEM_ID SET t1.BUYER ...

  8. 在SAE搭建微信公众账号服务

    让我们回到2014年11月,从公司请假回成都,在天府软件园B区旁边的小区里,那个10多平米的出租屋里,闲来无事,我想找个事情做一做,好让我这漂浮的心静下来.大约在半年前就申请了微信的一个公众账号,一直 ...

  9. Java众神之路（1）-语言介绍

    Java语言介绍 1.Java的历史 我个人认为,学习一种技术,不止要关注技术本身,也应该去了解一下它的发展史,这一方面是对技术本身的尊重,另一方面也是希望能够通过该技术的发展历史推测出其未来可能的发 ...

  10. IE8,11的iframe高度自适应

    兼容模式:function iFrameHeightTzinfo() { var ifm= document.getElementById("iframe_tzinfo"); // ...