最近做一个自定义视觉效果的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. 牛客练习赛22 C 简单瞎搞题

    //位运算 // & 都是1 才是 1 // | 都是0 才是0 // ^ 不一样才是1 #include <iostream> #include <cstdio> # ...

  2. Leetcode 559. N叉树的最大深度

    题目链接 https://leetcode-cn.com/problems/maximum-depth-of-n-ary-tree/description/ 题目描述 给定一个N叉树,找到其最大深度. ...

  3. myeclipse中hibernate生成映射文件

    在hibernate中,每个数据表对应的其实是一个实体类,每个实体类有一个对应的hbm.xml配置文件匹配,myeclipse中有个MyEclipse Database Explorer视图,它提供了 ...

  4. linux的vi和vim编辑器操作

    vi:linux内部的文本编辑器:vim:vi的增强版,具有程序编辑的能力. vi和vim的三种常见模式: (1)正常模式(一般模式):vim一打开就是这种模式,此模式下可以使用各种快捷键,比如复制粘 ...

  5. Windows清理打印池的方法

    另存为bat运行   @echo off title 快速清除打印队列 echo. echo 停止打印机服务 net stop spooler>nul echo. del /q /f %wind ...

  6. 大数据学习——KETTLE入门学习——kettle安装

    https://blog.csdn.net/u012637358/article/details/82593492 下载的kettle是汉化的 改成英文的 工具——选项——选择英文

  7. [Android Studio篇][1] AS开发中遇到问题汇总

    1 在android新建文件,提示权限不够,增加权限 修改工程下 main/AndroidMainfest.xml增加 <uses-permission android:name="a ...

  8. 实用jstl实现未登录时不能绕过登录界面的效果

    package com.filter; import java.io.IOException; import java.util.ArrayList; import java.util.Arrays; ...

  9. MacPorts的安装和使用

    1.安装 MacPorts的官方网站:http://www.macports.org/install.php 有dmg安装和源代码安装两种方式,下载dmg格式一步步安装即可 2.使用 更新ports ...

  10. [cogs729]圆桌问题（最大流）

    传送门 模型 二分图多重匹配问题,可以用最大流解决. 实现 建立二分图,每个单位为X集合中的顶点,每个餐桌为Y集合中的顶点,增设附加源S和汇T. 1.从S向每个Xi顶点连接一条容量为该单位人数的有向边 ...