CSS为什么伪元素Before无法在Input元素上显示_针对替换元素改用容器包装法

为什么伪元素Before无法在Input元素上显示？针对替换元素改用容器包装法

为什么 ::before 在 上完全不生效

这事儿其实挺让人困惑的：你明明写了样式，content 属性也设置了，可 前面就是死活不显示任何东西。问题根源不在于你的代码，而在于 本身是一个“替换元素”。

长期稳定更新的攒劲资源： >>>点此立即查看<<<

所谓替换元素，简单说就是它的内容渲染不由 CSS 盒模型直接控制，而是由浏览器（或操作系统）的原生控件接管。CSS 规范白纸黑字地写着：::before 和 ::after 这类伪元素，禁止作用于替换元素。所以，无论你加上 !important，还是尝试修改 display 属性，DOM 里压根就不会生成对应的伪节点——打开开发者工具看看，自然也就找不到踪迹。这不是浏览器的 bug，而是规则如此。

哪些元素属于同类型“伪元素失效区”

除了 ，前端开发中还有几个常见的“钉子户”，同样无法使用伪元素进行装饰：

• </code>（注意：虽然它能编辑文本，但依然是替换元素）</li> <li><code><select></code></li> <li><code><iframe></code></li> <li><code><video></code>、<code></code></li> </ul> <p>它们的共同特点是什么？内容都由浏览器独立的渲染路径绘制，CSS 的伪元素机制在这里没有“挂载点”。理解这一点，能省下不少无谓的调试时间。</p> <h3>容器包装法实操要点</h3> <p>那么，有没有办法绕过这个限制呢？当然有。最可靠、最优雅的方案，就是“容器包装法”。核心思路很简单：既然 <code><input></code> 本身不行，那我们就在它外面套一个普通的容器，把装饰逻辑转移到这个容器上。</p> <p>来看具体实现。首先，HTML 结构需要稍作调整：</p> <pre class='brush:php;toolbar:false;'> <input type="text" class="real-input"> </div> <!--页码--> <div class="wezPage"></div> <!--页码 end--> <div class="xphTlzxBox"> <div class="xyxJcTitle"> <h2>同类更新</h2><a href="/news/" title="更多"><h3></h3><b></b></a> <div class="clear"></div> </div> <ul class="xphTlzxList"> <li> <p><a href="/news/1173.html" title="nonce属性怎么配合CSP_script样式白名单机制【操作】" class="ywAblack">nonce属性怎么配合CSP_script样式白名单机制【操作】</a></p> <span><a href="/news/1173.html" title="阅读">阅读</a></span> </li> <li> <p><a href="/news/1172.html" title="CSS如何实现容器水平垂直居中？利用Flexbox或Grid布局属性" class="ywAblack">CSS如何实现容器水平垂直居中？利用Flexbox或Grid布局属性</a></p> <span><a href="/news/1172.html" title="阅读">阅读</a></span> </li> <li> <p><a href="/news/1171.html" title="CSS如何实现元素的淡入淡出切换？通过opacity与visibility的组合" class="ywAblack">CSS如何实现元素的淡入淡出切换？通过opacity与visibility的组合</a></p> <span><a href="/news/1171.html" title="阅读">阅读</a></span> </li> <li> <p><a href="/news/1179.html" title="phpEnv如何修改PHP-FPM监听方式 phpEnv unix socket配置" class="ywAblack">phpEnv如何修改PHP-FPM监听方式 phpEnv unix socket配置</a></p> <span><a href="/news/1179.html" title="阅读">阅读</a></span> </li> <li> <p><a href="/news/1178.html" title="C#怎么实现简单的爬虫_C#抓取网页HTML并提取文本【爬虫】" class="ywAblack">C#怎么实现简单的爬虫_C#抓取网页HTML并提取文本【爬虫】</a></p> <span><a href="/news/1178.html" title="阅读">阅读</a></span> </li> <li> <p><a href="/news/1177.html" title="将python项目导出为docker镜像实现过程" class="ywAblack">将python项目导出为docker镜像实现过程</a></p> <span><a href="/news/1177.html" title="阅读">阅读</a></span> </li> <li> <p><a href="/news/1176.html" title="CSS如何根据复选框选中状态修改整行背景_利用:checked + label结构" class="ywAblack">CSS如何根据复选框选中状态修改整行背景_利用:checked + label结构</a></p> <span><a href="/news/1176.html" title="阅读">阅读</a></span> </li> <li> <p><a href="/news/1174.html" title="CSS引入中如何实现样式的代码分割(Code Splitting)_利用构建工具自动提取公共包" class="ywAblack">CSS引入中如何实现样式的代码分割(Code Splitting)_利用构建工具自动提取公共包</a></p> <span><a href="/news/1174.html" title="阅读">阅读</a></span> </li> <li> <p><a href="/news/1182.html" title="Python实现查找并替换Word文档中的文本" class="ywAblack">Python实现查找并替换Word文档中的文本</a></p> <span><a href="/news/1182.html" title="阅读">阅读</a></span> </li> <li> <p><a href="/news/1181.html" title="String字符串如何转换为实体对象" class="ywAblack">String字符串如何转换为实体对象</a></p> <span><a href="/news/1181.html" title="阅读">阅读</a></span> </li> </ul> </div> </div> <div class="xphRight"> <div class="xphRmyxBox" style="margin-top:25px;"> <div class="xyxJcTitle xphRmyxTitle"> <h2>最新资讯</h2><a href="/news/" title="更多"><h3>更多</h3><b></b></a> <div class="clear"></div> </div> <ul class="xphRmzxList"> <li><a href="/news/1247.html" title="八方同聚，问鼎申城《第五人格》八周年盛典暨深渊的呼唤Ⅸ全球总决赛淘汰赛即将开启" class="ywAblack">八方同聚，问鼎申城《第五人格》八周年盛典暨深渊的呼唤Ⅸ全球总决赛淘汰赛即将开启</a></li> <li><a href="/news/1250.html" title="我的世界史前自然长椅合成表大全" class="ywAblack">我的世界史前自然长椅合成表大全</a></li> <li><a href="/news/1248.html" title="白蛇传奇如何激活狂暴之力" class="ywAblack">白蛇传奇如何激活狂暴之力</a></li> <li><a href="/news/1246.html" title="《望月》隐弦士职业介绍" class="ywAblack">《望月》隐弦士职业介绍</a></li> <li><a href="/news/1245.html" title="轨道星火怎么玩" class="ywAblack">轨道星火怎么玩</a></li> <li><a href="/news/1249.html" title="开局废灵根我无敌了手游测试资格获取方法大全开局废灵根我无敌了手游内测资格申请与预约攻略" class="ywAblack">开局废灵根我无敌了手游测试资格获取方法大全开局废灵根我无敌了手游内测资格申请与预约攻略</a></li> <li><a href="/news/1253.html" title="《龙族：卡塞尔之门》傲烈介绍" class="ywAblack">《龙族：卡塞尔之门》傲烈介绍</a></li> <li><a href="/news/1252.html" title="异环手游打工指南异环手游高效刷资源与金币的实用攻略" class="ywAblack">异环手游打工指南异环手游高效刷资源与金币的实用攻略</a></li> </ul> </div> <div class="xphRmyxBox"> <div class="xyxJcTitle xphRmyxTitle"> <h2>游戏推荐</h2><a href="/game/" title="更多"><h3>更多</h3><b></b></a> <div class="clear"></div> </div> <ul class="xphYxtjList"> <li> <a href="/game/27.html" title="江南传奇" class="ywAblack"> <img src="https://www.168sy.com/d/file/titlepic/20230307/x12yjgz4mtc.png" onerror="this.src='/e/data/images/notimg.gif'" alt="江南传奇"/> <p>江南传奇</p> </a> </li> <li> <a href="/game/28.html" title="三国志曹操传" class="ywAblack"> <img src="https://www.168sy.com/d/file/titlepic/20230307/h5ifvkiqhnd.png" onerror="this.src='/e/data/images/notimg.gif'" alt="三国志曹操传"/> <p>三国志曹操传</p> </a> </li> <li> <a href="/game/30.html" title="口袋妖怪漆黑的魅影6.0" class="ywAblack"> <img src="https://www.168sy.com/d/file/titlepic/20230307/2fu2zyic14k.png" onerror="this.src='/e/data/images/notimg.gif'" alt="口袋妖怪漆黑的魅影6.0"/> <p>口袋妖怪漆黑的魅影6.0</p> </a> </li> <li> <a href="/game/29.html" title="勇士食堂" class="ywAblack"> <img src="https://www.168sy.com/d/file/titlepic/20230307/abrylnpo0ri.jpg" onerror="this.src='/e/data/images/notimg.gif'" alt="勇士食堂"/> <p>勇士食堂</p> </a> </li> <li> <a href="/game/31.html" title="恶魔争霸" class="ywAblack"> <img src="https://www.168sy.com/d/file/titlepic/20230307/2my2snjs4rf.jpg" onerror="this.src='/e/data/images/notimg.gif'" alt="恶魔争霸"/> <p>恶魔争霸</p> </a> </li> <li> <a href="/game/32.html" title="天地劫幽城再临" class="ywAblack"> <img src="https://www.168sy.com/d/file/titlepic/20230307/c4u5uinpy5q.png" onerror="this.src='/e/data/images/notimg.gif'" alt="天地劫幽城再临"/> <p>天地劫幽城再临</p> </a> </li> <li> <a href="/game/33.html" title="辛普森一家" class="ywAblack"> <img src="https://www.168sy.com/d/file/titlepic/20230307/n50bf2in151.png" onerror="this.src='/e/data/images/notimg.gif'" alt="辛普森一家"/> <p>辛普森一家</p> </a> </li> <li> <a href="/game/34.html" title="Camp Buddy" class="ywAblack"> <img src="https://www.168sy.com/d/file/titlepic/20230307/2ldvabl1mts.png" onerror="this.src='/e/data/images/notimg.gif'" alt="Camp Buddy"/> <p>Camp Buddy</p> </a> </li> <li> <a href="/game/36.html" title="保镖模拟器" class="ywAblack"> <img src="https://www.168sy.com/d/file/titlepic/20230307/mmtvdgq3w4t.jpg" onerror="this.src='/e/data/images/notimg.gif'" alt="保镖模拟器"/> <p>保镖模拟器</p> </a> </li> <div class="clear"></div> </ul> </div> <div class="xphRmyxBox"> <div class="xyxJcTitle xphRmyxTitle"> <h2>精彩专题</h2><a href="/zt/" title="更多"><h3>更多</h3><b></b></a> <div class="clear"></div> </div> <ul class="xphZxtjList"> <li><a href="/zt/msaygd/" title="魔兽暗影国度" class="ywAblack"><img src="https://www.168sy.com/d/file/p/2023/03-07/a8087c7b35674de7f70a708a637d1bc7.jpg" onerror="this.src='/e/data/images/notimg.gif'" alt="魔兽暗影国度"/> <p>魔兽暗影国度</p> </a> </li> <li><a href="/zt/sshy/" title="死神VS火影" class="ywAblack"><img src="https://www.168sy.com/d/file/p/2023/03-07/c33d930b91b1bc30316d0c08479df866.png" onerror="this.src='/e/data/images/notimg.gif'" alt="死神VS火影"/> <p>死神VS火影</p> </a> </li> <li><a href="/zt/rydts/" title="荣耀大天使" class="ywAblack"><img src="https://www.168sy.com/d/file/p/2023/03-07/f997ca99ace0cd25484eb79697f38cc6.png" onerror="this.src='/e/data/images/notimg.gif'" alt="荣耀大天使"/> <p>荣耀大天使</p> </a> </li> <li><a href="/zt/wzry/" title="王者荣耀" class="ywAblack"><img src="https://www.168sy.com/d/file/p/2023/03-07/5c7ffc58cc7b3d4736ed562a98c94b3c.jpg" onerror="this.src='/e/data/images/notimg.gif'" alt="王者荣耀"/> <p>王者荣耀</p> </a> </li> <div class="clear"></div> </ul> </div> <div class="xphRmyxBox"> <div class="xyxJcTitle xphRmyxTitle"> <h2>热门资讯</h2><a href="/news/" title="更多"><h3>更多</h3><b></b></a> <div class="clear"></div> </div> <ul class="xyxSpdtList"> <li> <a href="/news/414.html" class="shiping" title="《夜幕之下》先锋节奏榜一览"> <img src="https://www.168sy.com/d/file/titlepic/20260401/irsfychgi1c.png" onerror="this.src='/e/data/images/notimg.gif'" alt="《夜幕之下》先锋节奏榜一览"/></a> <dl> <dt><a href="/news/414.html" class="ywAblack" title="《夜幕之下》先锋节奏榜一览">《夜幕之下》先锋节奏榜一览</a></dt> <dd>1007次阅读</dd> </dl> <div class="clear"></div> </li> <li> <a href="/news/180.html" class="shiping" title="MAXONCinema 4D怎么使用引导线"> <img src="https://www.168sy.com/d/file/titlepic/20260401/ebriqcrj2xy.jpg" onerror="this.src='/e/data/images/notimg.gif'" alt="MAXONCinema 4D怎么使用引导线"/></a> <dl> <dt><a href="/news/180.html" class="ywAblack" title="MAXONCinema 4D怎么使用引导线">MAXONCinema 4D怎么使用引导线</a></dt> <dd>1006次阅读</dd> </dl> <div class="clear"></div> </li> <li> <a href="/news/250.html" class="shiping" title="迷你世界怎么给传送舱升级_给传送舱升级方法"> <img src="https://www.168sy.com/d/file/titlepic/20260403/5i0obfo0leu.jpg" onerror="this.src='/e/data/images/notimg.gif'" alt="迷你世界怎么给传送舱升级_给传送舱升级方法"/></a> <dl> <dt><a href="/news/250.html" class="ywAblack" title="迷你世界怎么给传送舱升级_给传送舱升级方法">迷你世界怎么给传送舱升级_给传送舱升级方法</a></dt> <dd>1006次阅读</dd> </dl> <div class="clear"></div> </li> <li> <a href="/news/62.html" class="shiping" title="导航犬离线地图使用教程"> <img src="https://www.168sy.com/d/file/titlepic/20230307/tflyuysleto.jpg" onerror="this.src='/e/data/images/notimg.gif'" alt="导航犬离线地图使用教程"/></a> <dl> <dt><a href="/news/62.html" class="ywAblack" title="导航犬离线地图使用教程">导航犬离线地图使用教程</a></dt> <dd>1005次阅读</dd> </dl> <div class="clear"></div> </li> <li> <a href="/news/167.html" class="shiping" title="QQ如何屏蔽群消息-QQ群消息免打扰设置方法"> <img src="https://www.168sy.com/d/file/titlepic/20260401/0nskwy2ow55.jpg" onerror="this.src='/e/data/images/notimg.gif'" alt="QQ如何屏蔽群消息-QQ群消息免打扰设置方法"/></a> <dl> <dt><a href="/news/167.html" class="ywAblack" title="QQ如何屏蔽群消息-QQ群消息免打扰设置方法">QQ如何屏蔽群消息-QQ群消息免打扰设置方法</a></dt> <dd>1005次阅读</dd> </dl> <div class="clear"></div> </li> <li> <a href="/news/1145.html" class="shiping" title="《逍遥情缘》中少侠如何打造装备？从收集必备材料开始！"> <img src="https://www.168sy.com/d/file/titlepic/20260420/cgkhyacjyvx.jpg" onerror="this.src='/e/data/images/notimg.gif'" alt="《逍遥情缘》中少侠如何打造装备？从收集必备材料开始！"/></a> <dl> <dt><a href="/news/1145.html" class="ywAblack" title="《逍遥情缘》中少侠如何打造装备？从收集必备材料开始！">《逍遥情缘》中少侠如何打造装备？从收集必备材料开始！</a></dt> <dd>1003次阅读</dd> </dl> <div class="clear"></div> </li> </ul> </div> </div> <div class="clear"></div> </div> <!--主体 end--> <div class="xyxFoot"> <div class="xyxFootIn"> <div class="xyxFootCont"> <div class="xyxFootLeft"> <div class="xyxFootLogo"><a href="#"></a></div> <div class="xyxGxwmBox"> <h2>关注我们:</h2> <span> <a href="#" class="weixing" title="微信"></a> <a href="javascript:void(0);" class="QQ QQ-friend-share" title="QQ"></a> <a href="javascript:void(0);" class="weibo xinlang shareSina" title="新浪微博"></a> <a href="#" class="baidu" title="百度"></a> </span> </div> </div> <div class="xyxFootMiddle"> <dl> <dt><a href="/update_game/" title="最新游戏">最新游戏</a></dt> <dd> <a href="/news/yygl/">最新攻略</a><span>|</span> <a href="/game/jsby/">角色扮演</a><span>|</span> <a href="/game/xxyz/">休闲益智</a><span>|</span> <a href="/game/qzsj/">枪战射击</a><span>|</span> <a href="/game/dzgd/">塔防迷宫</a><span>|</span> <a href="/game/zzcl/">战争策略</a><span>|</span> <div class="clear"></div> </dd> </dl> <dl> <dt><a href="/game/" title="抖音热游">抖音热游</a></dt> <dd> <a href="/news/rjjc/">热门资讯</a><span>|</span> <a href="/game/mnjy/">模拟经营</a><span>|</span> <a href="/game/mxjm/">冒险解密</a><span>|</span> <a href="/game/tyjj/">体育竞技</a><span>|</span> <a href="/game/jingpin/">传奇手游</a><span>|</span> <a href="/game/jjyx/">街机游戏</a><span>|</span> <div class="clear"></div> </dd> </dl> <dl> <dt><a href="/app/" title="狂玩游戏">热门软件</a></dt> <dd> <a href="/app/ttsj/">通讯社交</a><span>|</span> <a href="/app/yybf/">影音播放</a><span>|</span> <a href="/app/sytx/">摄影图像</a><span>|</span> <a href="/app/tsyd/">图书阅读</a><span>|</span> <a href="/app/gwlc/">购物理财</a><span>|</span> <a href="/app/ssxx/">生活休闲</a><span>|</span> <div class="clear"></div> </dd> </dl> <div class="clear"></div> </div> <div class="xyxFootCode"> <img src="/kaifamei/images/text78.png"/> <p>微信扫描关注公众号</p> </div> <div class="clear"></div> </div> <div class="xyxGywmBox"> <div class="xyxGywmIn"> <p><a href="/about.html" title="关于我们">关于我们</a> | <a href="/contactus.html" title="联系我们">联系我们</a> | <a href="/job.html" title="人才招聘">人才招聘</a> | <a href="/copyright.html" title="免责声明">免责声明</a></p> <p>蜀ICP备18022304号-13</p> <p>本站所有软件，都由网友上传，如有侵犯你的版权，请发邮件给39879941@qq.com</p> </div> </div> </div> </div> <div class="backTop" id="menuRight" style="display:none"> <div class="xCode"> <div class="xCodeIn"><a href="#" title="二维码">二维码</a></div> <div class="xCodeBg" style="display: none;"> <span><img src="/qr/api.php?url=http://m.168sy.com&p=8.9&m=1" /></span> <p>进入手机版</p> </div> </div> <ul class="backTopIn"> <li><a href="#" title="顶部" class="icon5">顶部</a></li> <div class="clear"></div> </ul> </div> </p> <div style="display: none;"> </div> <script> var ShareTip = function(){} //分享到新浪微博 ShareTip.prototype.sharetosina=function(title,url) { var sharesinastring='http://v.t.sina.com.cn/share/share.php?title='+title+'&url='+url+'&content=utf-8&sourceUrl='+url; window.open(sharesinastring,'newwindow','height=400,width=400,top=100,left=100'); } $('.shareSina').on('click', function () { var shareTitle = $('.blog-single-head h1').text(); var shareContent = $('.blog-single-head h2').text(); var shareUrl = window.location.href; var share1 = new ShareTip(); share1.sharetosina(shareTitle + " " + shareContent,shareUrl); }) // QQ好友分享 $('.QQ-friend-share').on('click',function(event){ event.preventDefault(); $('.panle-share').hide() var _shareUrl = 'https://connect.qq.com/widget/shareqq/iframe_index.html?'; _shareUrl += 'url=' + encodeURIComponent('https://www.168sy.com/'||location.href); //分享的链接 window.open(_shareUrl,'_blank'); }) </script> <!-- share end --> <div style="display:none;"><script src=/e/public/ViewClick?classid=25&id=1175&addclick=1></script></div> </body> </html>