怎样为input加伪元素

2024-09-07

input 对伪元素(:before :after)的支持情况

最近做一个自定义视觉效果的Switch组件,用到了 input:radio 和 label,并在label里用伪元素 :before 模拟状态的切换效果. 但是同事评审的时候说可以不用label,直接用input的微元素就可以实现.之前一直以为input这样的自闭合元素没有伪元素,做了个测试看一下到底有没有. 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT

CSS 伪元素使用参考

伪元素可以做得事情是非常多的,详情大家可以参考这里大放异彩的伪元素——可以做什么? 本篇主要讲两个伪元素:before和:after的几个要点: 1.:before和:after是加在元素的里面,也就是在元素里的最前面和最后面加一个伪元素,看图: 代码: * { margin:; padding:; } .par { width: 200px; height: 50px; padding: 20px; border: 1px solid grey; } .par:before { conten

CSS——伪元素与伪类

伪类与伪元素伪类:在特殊性中占据0,0,1,0 :link 向未访问的链接添加特殊的样式.也就是说,链接所指的 URI 尚未出现在用户代理的历史中.这种状态与 :visited状态是互斥的. :visited 对已访问的链接添加样式. :hover 对鼠标悬停时的链接应用样式 :foucs 对鼠标聚焦的链接应用样式 :active 向激活(在鼠标点击与释放之间发生的事件)的元素添加特殊的样式. 对于上述伪类,要遵循顺序书写!! :nth-child(n) 从父元素匹配索引为n的子元素,设置样式

伪元素黑魔法：一个替代onerror解决图片加载失败的方案

问题的引出是这样的,在一个项目中有大量的页面主体是table做数据展示,所以就封装了一个table的组件,提供动态渲染的方案.有个问题是数据类型中有图片,对于图片的加载失败我们需要做容错.一般我们的思路都是对img绑定error事件,替换该图片为一个默认的图片.但是error事件是不会冒泡的,我们渲染是动态的,我们不能delegate事件到body上.如果将处理写在js里,那么每次渲染的时候都要去给图片绑定error事件,写在模板里拼接(内联事件)又会很麻烦(我采取的方案是用户编写基本th,td

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

css中的::after和::before已经被大量地使用在我们日常开发中了,使用他们可以使我们的文档结构更加简洁.但是很多人对::after和::before仍不是特别了解,究竟他们是做什么的?如何使用他们?什么时候应该使用他们?笔者总结了一些对伪元素的理解和使用经验. 一.概念: 1.定义 The CSS ::before(::after) pseudo-element matches a virtual first(last) child of the selected element.

Effective前端4：尽可能地使用伪元素

伪元素是一个好东西,但是很多人都没怎么用,因为他们觉得伪元素太诡异了.其实使用伪元素有很多好处,最大的好处是它可以简化页面的html标签,同时用起来也很方便,善于使用伪元素可以让你的页面更加地简洁优雅. 更好的阅读体验移步:http://yincheng.site/using-before-after 1. 伪元素使用场景伪元素一般是用于画图,特别是那种无关紧要的分隔线.点之类的小元素,如下图的绿框所示: 上面第一张图的分隔线,就是用before画的.只需要给div套一个类,这个类写一个bef

css伪元素选择器（伪对象选择器）checked + 伪元素练习

伪对象也叫伪元素,在过去,伪类和伪元素都被书写成前面只加一个冒号,实际上应该是: :weilei ::伪元素而现在我们为了兼容旧的书写方式,用一个冒号引导伪类也是能被解析的. 伪类一般反应无法在CSS中轻松或者可靠检测到的某个元素的状态或属性 : 伪元素表示DOM外部的某种文档结构 . 伪类更多的是定义元素的状态,而伪元素则是改变文档结构,在结构外另加一个没有实际存在的元素(伪元素)常用伪元素: 1. E:before/E::before 2. E:after/E::after 1. E:

学习使用:before和:after伪元素

如果你一直密切关注着各种网页设计的博客,你可能已经注意到了:before和:after伪元素已经在前端开发中获得了相当多的关注.特别是在Nicolas Gallagher的博客中,后期运用了很多伪类元素. Nicolas Gallagher使用伪元素用静态的HTML标签创建84个GUI图标. 为了补充说明上述内容(和利用当前发展的趋势),我收集一些完全在伪元素下运行的东西.本文主要针对这一类人群,即已经看到了用伪元素做出了很酷的东西,但想知道所有有关before在css技术里的运用. 尽管css

[转] 学习使用：before和：after伪元素

http://www.w3cplus.com/css3/learning-to-use-the-before-and-after-pseudo-elements-in-css.html 如果你一直密切关注着各种网页设计的博客,你可能已经注意到了:before和:after伪元素已经在前端开发中获得了相当多的关注.特别是在Nicolas Gallagher的博客中,后期运用了很多伪类元素. Nicolas Gallagher使用伪元素用静态的HTML标签创建84个GUI图标. 为了补充说明上述内容

CSS :befor :after 伪元素的妙用

本篇重点介绍CSS中的:befor.:after创建的伪元素几种使用场景,如填充文本.作为iconfont.进度线.时间线以及几何图形. 1. 介绍 1.1 说明 CSS中的:befor.:after都会创建一个伪元素,其中:befor创建的伪元素是所选元素的第一个子元素,:after创建的伪元素是所选元素的最后一个子元素. :befor.:after创建的伪元素默认样式为内联样式. 1.2 语法 /* CSS3 */ selector::before /* CSS2 */ selector:b

前端笔记之HTML5&CSS3（中）选择器&伪类伪元素&CSS3效果&渐变背景&过渡

一.CSS3选择器 CSS3是CSS的第三代版本,新增了很多功能,例如:强大的选择器.盒模型.圆角.渐变.动画.2D/3D转换.文字特效等. CSS3和HTML5没有任何关系!HTML5骨架中,可以用CSS2.1也可以用CSS3.XHTML骨架中可以用CSS3的样式. 在学习CSS之前都是学习选择器,在CSS2中有class.id.标签选择器等. CSS3赋予了强大的选择器. CSS3没有颠覆传统CSS的写法,依然是: 选择器{ k:v; k:v; } CSS有一个特点,遇见自己不认识的选择器.

python 全栈开发，Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)

一.HTML中的行级标签和块级标签块级标签常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body100%宽度行级标签常见的行级标签:a,span,strong,u,em 1.能和其他元素待在同一行2.不能设置宽高3.宽高是内容的宽高行内块标签常见的行内块标签:img,input,textarea1.能和其他元素待在一行2.能设置宽高 span默认是不能设置宽高的,但是设置了displ

关于伪类“:pseudo-class”和伪元素“::pseudo-element”的常见应用

伪类用于指定要选择的元素的特殊状态,向其添加特殊的效果,比如: input { width: 515px; height: 50px; padding: 10px 20px; border: 1px #fff solid; font-size: 16px; box-shadow: 0 0 21px rgba(97, 104, 124, .15); vertical-align: middle; } input:focus{ border-color: #2bb3ee; } 效果: 给input元

python 之前端开发（基本选择器、组合选择器、交集与并集选择器、序列选择器、属性选择器、伪类选择器、伪元素选择器）

11.3 css 11.31 基本选择器 11.311 id选择器根据指定的id名称,在当前界面中找到对应的唯一一个的标签,然后设置属性 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #p1 {color: red;} 引用id一定要加# #p2

CSS3新增（选择器{属性选择器，结构伪类选择器，伪元素选择器}）

1.属性选择器属性选择器,可以根据元素特定的属性来选择元素,这样就不用借助类或者 id选择器. E [ att ] 选择具有 att 属性的 E 元素例如:input [ value ] E [ att = 'val' ] 选择具有 att 属性且属性值等于 val 的 E元素 E [ att = 'val' ] 选择具有 att 属性且属性值等于 val 的 E元素 E [ att ^= 'val' ] 选择具有 att 属性且属性值以 val 开头的 E元素 E

CSS躬行记（2）——伪类和伪元素

一.伪类选择器伪选择器弥补了常规选择器的不足,能够实现一些特殊情况下的样式,例如在鼠标悬停时或只给字符串中的第一个字符指定样式.与类选择器类似,可以从HTML元素的class属性中查看到,但伪选择器不会出现在HTML文档中(有几个例外,如:lang.::placeholder等).并且它的关键字大小写不敏感,也就是说empty和EMPTY完全相同.伪选择器分为两种:伪类选择器和伪元素选择器.注意,伪选择器会以一个或两个冒号(:)开头,并且如果要与其它选择器组合使用,那么只能与类型选择器(即元素

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

最近在研读 <CSS SECRET>(CSS揭秘)这本大作,对 CSS 有了更深层次的理解,折腾了下面这个项目: CSS3奇思妙想 -- Demo (请用 Chrome 浏览器打开,非常值得一看).采用单标签完成各种图案,许多图案与本文有关. 也希望觉得不错的同学顺手在我的 Github 点个 star : CSS3奇思妙想 . 正文从这里开始,本文主要讲述一下伪元素 before 和 after 各种妙用. :before和::before的区别在介绍具体用法之前,简单介绍下伪类和

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

最近无论是工作还是自我学习提升都很忙,面对长篇大论的博文总是心有余而力不足,但又不断的接触学习到零碎的但是很有意义的知识点,很想分享给大家,所以本篇可能会很短. 本篇接我另一篇讲述 CSS 伪元素的文章: [CSS进阶]伪元素的妙用–单标签之美,看完本文觉得有意思的可以再去看看上一篇,分享了一些伪元素的妙用. 正文从这里开始: 哪些标签不支持伪元素? 我也是才知道这个姿势.为了不误导读者,就赶紧补充一下. 伪元素虽然强大,但是还是有一些特定的标签是不支持伪元素 before 和 after 的.

jQuery如何改变css伪元素样式

首先我们看一下css伪元素是什么: CSS 伪元素用于向某些选择器设置特殊效果. 伪元素有哪些: :first-line 伪元素:"first-line" 伪元素用于向文本的首行设置特殊样式. :first-letter 伪元素:"first-letter" 伪元素用于向文本的首字母设置特殊样式. :before 伪元素:":before" 伪元素可以在元素的内容前面插入新内容. :after 伪元素:":after" 伪元素

CSS笔记之伪类与伪元素

伪类分为两种:UI伪类与结构化伪类 UI伪类:a:link{} a:hover{} a:active{} a:visited{} input[type='text']:focus{} #title-one:target{} 结构化伪类: table tr:nth-child(even){} //even---下标为偶数的子元素 table tr:nth-child(odd){} //odd---下标为奇数的子元素 table tr:first-child{}

怎样为input加伪元素

热门专题