input标签不支持伪元素

最新推荐文章于 2023-09-14 21:58:10 发布

404鹿

最新推荐文章于 2023-09-14 21:58:10 发布

阅读量546

点赞数 1

分类专栏： css

原文链接：https://www.cnblogs.com/zoo-x/articles/11784934.html

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

伪元素是在容器内渲染的,如果标签元素里面不能插入标签元素,像img,input等单标签或者radio此类标签,这些不支持伪元素

解决方法: 可以在使用的时候在外面套一层div

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

404鹿

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
input标签不支持伪元素

伪元素是在容器内渲染的,如果标签元素里面不能插入标签元素,像img,input等单标签或者radio此类标签,这些不支持伪元素解决方法: 可以在使用的时候在外面套一层div
复制链接

扫一扫

专栏目录

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

weixin_30763455的博客

11-24

850

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

CSS伪元素利用伪元素为input输入框添加图标 伪元素before的垂直居中

一起来看烟花吧的博客

01-29

7993

目录标题伪类和伪元素封装一个有前缀和后缀的input输入框总结参考伪类和伪元素 伪类专门用来表示元素的一种特殊的状态。比如：访问过的链接，普通的链接，获取焦点文本框 伪元素表示元素中的一些特殊的位置。比如::before表示元素最前面的部分 CSS中，::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过 content属性来为一个元素添加修饰性的内容。此元素默认为行内元素。在CSS3中，通过::创建伪元素，通过:选中伪类。浏览器也接收将::before写做:before 封

参与评论您还未登录，请先登录后发表或查看评论

用 input 伪元素做一个复选框

aocang1339的博客

09-11

233

这个方法有兼容性，ie 不兼容 html <div class="real_input">  <label class="checkBox"><input type="checkbox"></label> </div> css /*复选框*/ .real...

使用伪元素简单实现input框的判断√×

樊小书生

02-05

2670

一些表单中的输入框输入之后会进行判断，会在input框之后以√×来表示判断的结果，下面我使用伪元素来简单的实现这个功能。

img、input和其他的单标签是没有after和before伪元素的，因为单标签本身不能有子元素

qq_42372534的博客

04-26

583

img、input和其他的单标签是没有after和before伪元素的，因为单标签本身不能有子元素,所以不能通过input::before来写一些图标之类的内容

有的input不支持伪元素

qq_36089229的博客

07-30

902

有的input不支持伪元素 这是一个给自己看的笔记今天想写一个可以利用小眼睛控制密码显示隐藏的代码，想的是用after伪元素来插入眼睛图标。 .box input::after { content: '\e9ce'; font-family: 'icomoon'; position: absolute; top: 0; right: 0; } 结果压根就找不到小眼睛。一开始我还以为是字

伪类和伪元素选择器

qq_46405281的博客

05-17

457

链接伪类选择器、动态伪类选择器、表单伪类选择器、结构伪类选择器，伪元素选择器

CSS ::file-selector-button伪元素修改input上传文件按钮的样式

想好了再写！

07-18

1679

* 修改按钮后的文字颜色 *//* 隐藏按钮后的文字 */

使用伪元素:after来实现placeholder的功能 / 间接操作伪元素的内容

vcxiaohan的博客

04-02

1200

pwd * {margin: 0; padding: 0; font-family: "Microsoft YaHei", Arial, sans-serif;} body, html {width: 100%; height: 100%; background: pink;} input {outline: none; border-radius: 5px; b

对input使用伪类(::after,::before)不显示的解决方法

最新发布

huangpb的博客

09-14

2759

这个伪元素可以改变 input、textarea 占位文本的样式。

HTML学习笔记（四）伪类选择器、伪元素选择器、分组与嵌套、即一些基本属性介绍

m0_51734025的博客

12-23

1495

下面是看了林海峰老师的视频的学习笔记来与大家分享一、伪类选择器伪类选择器这里主要是为大家介绍a标签与input标签的CSS样式，下面用简单的案例加注解为大家介绍 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> a:link{ ...

图解CSS伪类和伪元素

syzdev的博客

03-31

2106

1 简介伪类和伪元素都属于CSS选择器的附加关键字，在形式上，用单冒号:表示伪类，用双冒号::表示伪元素，如： // 伪类 div:hover { } // 伪元素 div::after { } 注意：由于历史遗留问题，伪元素div::after和div:after两种写法在大部分浏览器下是等同的，不过按照规范，应当使用单冒号:用于表示伪类，双冒号::用于表示伪元素，以便区分伪类和伪元素。 2 伪类伪类用于表示元素的某种状态，主要有操作状态，选择器状态以及表单状态几种，本文主要介绍操

模仿京东输入内容案例

Jessicawh的博客

08-24

420

<!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>Do

前端知识点总结（四）伪元素（伪对象）和伪类的区别?

404 not found

06-13

2162

其中伪类和伪元素的根本区别在于：它们是否创造了新的元素。伪元素/伪对象：不存在在DOM文档中，是虚拟的元素，是创建新元素。代表某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。伪对象选择符E:first-letter/E::first-letterCSS1/3设置对象内的第一个字符的样式。E:first-line/E::first-lineCSS1/3设置对象内的第一行的样...

jquery怎么改变伪类元素样式

05-05

jQuery不能直接操作CSS伪类元素，因为伪类是浏览器根据当前状态自动生成的，而不是一个真正的元素。但是，可以使用一些技巧来模拟改变伪类元素的样式。一种常用的方法是使用添加或移除类的方式来实现。例如，如果想改变a标签的鼠标悬停状态下的颜色，可以这样写： CSS代码： ```css a:hover { color: red; } ``` jQuery代码： ```javascript $('a').hover(function(){ $(this).addClass('hovered'); }, function(){ $(this).removeClass('hovered'); }); ``` 然后在CSS中定义.hovered类的样式： ```css .hovered { color: red; } ``` 这样，当鼠标悬停在a标签上时，jQuery会给它添加.hovered类，从而改变它的颜色。另外一种方法是使用CSS函数。比如，可以使用attr()函数来获取元素的属性值，然后使用CSS变量来改变样式。例如，如果想改变input[type="range"]的滑块颜色，可以这样写： CSS代码： ```css input[type="range"]::-webkit-slider-thumb { background-color: var(--thumb-color); } ``` jQuery代码： ```javascript $('input[type="range"]').on('input', function(){ var value = $(this).val(); $(this).css('--thumb-color', 'rgb(' + value + ', 0, 0)'); }); ``` 这样，当滑块的值改变时，jQuery会设置--thumb-color变量的值，从而改变滑块的颜色。注意，这种方法只在支持CSS变量的浏览器上有效。