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="mxyZxphBox"> <div class="mxyZxphIn"> <div class="nfxSyphTitle"> <b></b> <h2>精彩专题</h2> <a href="/zt/" title="更多"><b></b>更多</a> <div class="clear"></div> </div> <ul class="mobDptj_box"> <li> <a href="/zt/msaygd/" class="aBlack"> <div class="img_box"><img src="https://www.123xi.com/d/file/p/2023/03-07/a8087c7b35674de7f70a708a637d1bc7.jpg" alt="魔兽暗影国度"></div> <h2>魔兽暗影国度</h2> </a> </li> <li> <a href="/zt/sshy/" class="aBlack"> <div class="img_box"><img src="https://www.123xi.com/d/file/p/2023/03-07/c33d930b91b1bc30316d0c08479df866.png" alt="死神VS火影"></div> <h2>死神VS火影</h2> </a> </li> <li> <a href="/zt/rydts/" class="aBlack"> <div class="img_box"><img src="https://www.123xi.com/d/file/p/2023/03-07/f997ca99ace0cd25484eb79697f38cc6.png" alt="荣耀大天使"></div> <h2>荣耀大天使</h2> </a> </li> <li> <a href="/zt/wzry/" class="aBlack"> <div class="img_box"><img src="https://www.123xi.com/d/file/p/2023/03-07/5c7ffc58cc7b3d4736ed562a98c94b3c.jpg" alt="王者荣耀"></div> <h2>王者荣耀</h2> </a> </li> <div class="clear"></div> </ul> </div> </div> <div class="mxyZxphBox"> <div class="mxyZxphIn"> <div class="nfxSyphTitle"> <b></b> <h2>最新更新</h2> <a href="/update_app/" title="更多"><b></b>更多</a> <div class="clear"></div> </div> </div> <ul class="mxyZxgxList"> <li> <div class="mxyZxgxLeft"> <a href="/app/1624.html" title="宝宝巴士世界免费版"><img src="https://www.123xi.com/d/file/titlepic/20260405/svyr5fnmpzz.jpg" alt="宝宝巴士世界免费版"/></a> <dl> <dt><a href="/app/1624.html" title="宝宝巴士世界免费版" class="aBlack">宝宝巴士世界免费版</a></dt> <dd class="cont1"><a href="/app/etjy/" title="儿童教育" class="cBlack">儿童教育</a>  |  99.77M </dd> <dd class="cont2"> <span><b class="icon1"></b>Android/Ios</span> <span><b class="icon2"></b>2026-04-05</span> <div class="clear"></div> </dd> </dl> </div> <div class="mxyElelRight"><a href="/app/1624.html"></a></div> <div class="clear"></div> </li> <li> <div class="mxyZxgxLeft"> <a href="/app/1623.html" title="叫叫阅读手机版"><img src="https://www.123xi.com/d/file/titlepic/20260405/pb31s3gteg2.jpg" alt="叫叫阅读手机版"/></a> <dl> <dt><a href="/app/1623.html" title="叫叫阅读手机版" class="aBlack">叫叫阅读手机版</a></dt> <dd class="cont1"><a href="/app/etjy/" title="儿童教育" class="cBlack">儿童教育</a>  |  107.78M </dd> <dd class="cont2"> <span><b class="icon1"></b>Android/Ios</span> <span><b class="icon2"></b>2026-04-05</span> <div class="clear"></div> </dd> </dl> </div> <div class="mxyElelRight"><a href="/app/1623.html"></a></div> <div class="clear"></div> </li> <li> <div class="mxyZxgxLeft"> <a href="/app/1622.html" title="儿童舞蹈大全"><img src="https://www.123xi.com/d/file/titlepic/20260405/jncvlrazevh.jpg" alt="儿童舞蹈大全"/></a> <dl> <dt><a href="/app/1622.html" title="儿童舞蹈大全" class="aBlack">儿童舞蹈大全</a></dt> <dd class="cont1"><a href="/app/etjy/" title="儿童教育" class="cBlack">儿童教育</a>  |  36.53M </dd> <dd class="cont2"> <span><b class="icon1"></b>Android/Ios</span> <span><b class="icon2"></b>2026-04-05</span> <div class="clear"></div> </dd> </dl> </div> <div class="mxyElelRight"><a href="/app/1622.html"></a></div> <div class="clear"></div> </li> <li> <div class="mxyZxgxLeft"> <a href="/app/1627.html" title="作文纸条安卓版"><img src="https://www.123xi.com/d/file/titlepic/20260405/zldsud5lmpt.jpg" alt="作文纸条安卓版"/></a> <dl> <dt><a href="/app/1627.html" title="作文纸条安卓版" class="aBlack">作文纸条安卓版</a></dt> <dd class="cont1"><a href="/app/etjy/" title="儿童教育" class="cBlack">儿童教育</a>  |  86.39M </dd> <dd class="cont2"> <span><b class="icon1"></b>Android/Ios</span> <span><b class="icon2"></b>2026-04-05</span> <div class="clear"></div> </dd> </dl> </div> <div class="mxyElelRight"><a href="/app/1627.html"></a></div> <div class="clear"></div> </li> <li> <div class="mxyZxgxLeft"> <a href="/app/1626.html" title="熊猫博士DK儿童大百科"><img src="https://www.123xi.com/d/file/titlepic/20260405/lkvl1cqxfhi.jpg" alt="熊猫博士DK儿童大百科"/></a> <dl> <dt><a href="/app/1626.html" title="熊猫博士DK儿童大百科" class="aBlack">熊猫博士DK儿童大百科</a></dt> <dd class="cont1"><a href="/app/etjy/" title="儿童教育" class="cBlack">儿童教育</a>  |  109.41M </dd> <dd class="cont2"> <span><b class="icon1"></b>Android/Ios</span> <span><b class="icon2"></b>2026-04-05</span> <div class="clear"></div> </dd> </dl> </div> <div class="mxyElelRight"><a href="/app/1626.html"></a></div> <div class="clear"></div> </li> <li> <div class="mxyZxgxLeft"> <a href="/app/1625.html" title="宝贝听听最新版"><img src="https://www.123xi.com/d/file/titlepic/20260405/jmuhhdhl2op.jpg" alt="宝贝听听最新版"/></a> <dl> <dt><a href="/app/1625.html" title="宝贝听听最新版" class="aBlack">宝贝听听最新版</a></dt> <dd class="cont1"><a href="/app/etjy/" title="儿童教育" class="cBlack">儿童教育</a>  |  106.58M </dd> <dd class="cont2"> <span><b class="icon1"></b>Android/Ios</span> <span><b class="icon2"></b>2026-04-05</span> <div class="clear"></div> </dd> </dl> </div> <div class="mxyElelRight"><a href="/app/1625.html"></a></div> <div class="clear"></div> </li> <li> <div class="mxyZxgxLeft"> <a href="/app/1628.html" title="小猿优课app"><img src="https://www.123xi.com/d/file/titlepic/20260405/qhgyvfgwunc.jpg" alt="小猿优课app"/></a> <dl> <dt><a href="/app/1628.html" title="小猿优课app" class="aBlack">小猿优课app</a></dt> <dd class="cont1"><a href="/app/etjy/" title="儿童教育" class="cBlack">儿童教育</a>  |  196.81M </dd> <dd class="cont2"> <span><b class="icon1"></b>Android/Ios</span> <span><b class="icon2"></b>2026-04-05</span> <div class="clear"></div> </dd> </dl> </div> <div class="mxyElelRight"><a href="/app/1628.html"></a></div> <div class="clear"></div> </li> <li> <div class="mxyZxgxLeft"> <a href="/app/1615.html" title="桐乡教育官网版"><img src="https://www.123xi.com/d/file/titlepic/20260405/y3n0prbbpn1.jpg" alt="桐乡教育官网版"/></a> <dl> <dt><a href="/app/1615.html" title="桐乡教育官网版" class="aBlack">桐乡教育官网版</a></dt> <dd class="cont1"><a href="/app/etjy/" title="儿童教育" class="cBlack">儿童教育</a>  |  38.56M </dd> <dd class="cont2"> <span><b class="icon1"></b>Android/Ios</span> <span><b class="icon2"></b>2026-04-05</span> <div class="clear"></div> </dd> </dl> </div> <div class="mxyElelRight"><a href="/app/1615.html"></a></div> <div class="clear"></div> </li> </ul> </div> <div class="mxyZxphBox mxyZxphBox1"> <div class="mxyZxphIn"> <div class="nfxSyphTitle"> <b></b> <h2>软件教程</h2> <a href="/news/rjjc/" title="更多"><b></b>更多</a> <div class="clear"></div> </div> </div> <ul class="nyxGlhzList"> <li> <span><a href="/news/1173.html" title="nonce属性怎么配合CSP_script样式白名单机制【操作】"><img src="https://www.123xi.com/d/file/titlepic/20260428/5er4gv1jnwi.jpg" alt="nonce属性怎么配合CSP_script样式白名单机制【操作】"/></a></span> <dl> <dt><a href="/news/1173.html" class="aBlack">nonce属性怎么配合CSP_script样式白名单机制【操作】</a></dt> <dd> <p>互联网</p> <em><b></b>04-28</em> </dd> </dl> <div class="clear"></div> </li> <li> <span><a href="/news/1172.html" title="CSS如何实现容器水平垂直居中？利用Flexbox或Grid布局属性"><img src="https://www.123xi.com/d/file/titlepic/20260428/3fjynl0tzqc.jpg" alt="CSS如何实现容器水平垂直居中？利用Flexbox或Grid布局属性"/></a></span> <dl> <dt><a href="/news/1172.html" class="aBlack">CSS如何实现容器水平垂直居中？利用Flexbox或Grid布局属性</a></dt> <dd> <p>互联网</p> <em><b></b>04-28</em> </dd> </dl> <div class="clear"></div> </li> <li> <span><a href="/news/1171.html" title="CSS如何实现元素的淡入淡出切换？通过opacity与visibility的组合"><img src="https://www.123xi.com/d/file/titlepic/20260428/ecuuo4ifp5w.jpg" alt="CSS如何实现元素的淡入淡出切换？通过opacity与visibility的组合"/></a></span> <dl> <dt><a href="/news/1171.html" class="aBlack">CSS如何实现元素的淡入淡出切换？通过opacity与visibility的组合</a></dt> <dd> <p>互联网</p> <em><b></b>04-28</em> </dd> </dl> <div class="clear"></div> </li> <li> <span><a href="/news/1179.html" title="phpEnv如何修改PHP-FPM监听方式 phpEnv unix socket配置"><img src="https://www.123xi.com/d/file/titlepic/20260428/0pjbqaiphkk.jpg" alt="phpEnv如何修改PHP-FPM监听方式 phpEnv unix socket配置"/></a></span> <dl> <dt><a href="/news/1179.html" class="aBlack">phpEnv如何修改PHP-FPM监听方式 phpEnv unix socket配置</a></dt> <dd> <p>互联网</p> <em><b></b>04-28</em> </dd> </dl> <div class="clear"></div> </li> <li> <span><a href="/news/1178.html" title="C#怎么实现简单的爬虫_C#抓取网页HTML并提取文本【爬虫】"><img src="https://www.123xi.com/d/file/titlepic/20260428/5zzenv2htvp.jpg" alt="C#怎么实现简单的爬虫_C#抓取网页HTML并提取文本【爬虫】"/></a></span> <dl> <dt><a href="/news/1178.html" class="aBlack">C#怎么实现简单的爬虫_C#抓取网页HTML并提取文本【爬虫】</a></dt> <dd> <p>互联网</p> <em><b></b>04-28</em> </dd> </dl> <div class="clear"></div> </li> </ul> </div> </div> <!--底部--> <div class="nfxFootFoot"> <div class="nfxFoot"> <dl> <dt></dt> <dd> <p><a href="https://beian.miit.gov.cn/" rel="nofollow" style="color: #757575;text-decoration: none;" target="_blank"></a></p> <p>如有侵犯您的权益，请发邮件给yxz@vip.qq.com</p> </dd> </dl> <div class="nfxFootIn"> <span><a href="/" title="首页"><b class="icon1"></b>首页</a></span> <span><a href="https://www.123xi.com" title="电脑版"><b class="icon2"></b>电脑版</a></span> <span class="border"><a href="#" title="顶部"><b class="icon3"></b>顶部</a></span> <div class="clear"></div> </div> </div> </div> <div style="display: none;"> </div> </body> </html>