最近做一个自定义视觉效果的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. hihocoder1175 拓扑排序2

    #1175 : 拓扑排序·二 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi和小Ho所在学校的校园网被黑客入侵并投放了病毒.这事在校内BBS上立刻引起了大家的讨论 ...

  2. P3369 【模板】普通平衡树FHQtreap

    P3369 [模板]普通平衡树(Treap/SBT) 题目描述 您需要写一种数据结构(可参考题目标题),来维护一些数,其中需要提供以下操作: 插入x数 删除x数(若有多个相同的数,因只删除一个) 查询 ...

  3. LA 6538 Dinner Coming Soon DP

    题意: 给出一个有\(N\)个顶点\(M\)条有向边的图,起点为\(1\),终点为\(N\). 每条边有经过的时间,和经过这条边的花费.一开始你有\(R\)元钱,要在\(T\)时间内赶到终点去约会. ...

  4. python中json操作了解

    什么是接口? 交换数据 http://openweathermap.org/current json简介 JSON 是存储和交换文本信息的语法.类似 XML JSON 语法是 JavaScript 语 ...

  5. python基础补漏-08-异常处理

    try: #正常代码逻辑 ins = raw_input("this is a tast:") print ins+1 except Exception,e: print e -- ...

  6. Leetcode 467.环绕字符串中的唯一子字符串

    环绕字符串中的唯一子字符串 把字符串 s 看作是"abcdefghijklmnopqrstuvwxyz"的无限环绕字符串,所以 s 看起来是这样的:"...zabcdef ...

  7. STL之set容器的总结

    最近做了很多题型,都是用简单的STL就解决了,深刻的感觉到STL的伟大力量,但是本人在遇到问题的时候还是喜欢用常规的算法去解决问题,脑袋笨没办法,有时候根本想不到用STL去解决一些问题 往往都是砍了网 ...

  8. DS-博客作业06--图

    DS-博客作业06--图 1.本周学习总结(0--2分) 1.思维导图 2.谈谈你对图结构的认识及学习体会. 本章的图,因为和上一章的树上的比较紧凑,所以在考前一个星期也有看书背代码,也有理解代码和思 ...

  9. mysqld got signal 11

    问题发生背景 问题实例之前使用的是percona server,是安装pmm镜像自带的数据库,之后通过mysqldump迁移到了MySQL server,目前是只有有pmm server 访问pmm库 ...

  10. 分区脚本(fdisk)

    #!/bin/bash echo "np w" | fdisk /dev/sdc && mkfs -t /dev/sdc1