为何input.error红色边框无法完全包裹文本框？（JQuery Mobile环境）

我之前也踩过这个坑！JQuery Mobile（JQM）的表单控件自带了一套复杂的默认样式系统，你的自定义input.error样式失效或者显示不全，大概率是以下两个原因之一，我给你拆解下解决方案：

原因1：JQM的样式优先级更高，自定义规则被覆盖 #

JQM会给页面里的input元素生成更具体的CSS选择器（比如.ui-page .ui-input-text input），这些选择器的权重比你简单的input.error要高，导致你的红色边框样式根本没生效，或者只生效了一部分。

解决办法：提高选择器权重 #

你可以把选择器写得更具体，或者用!important（应急时用，不推荐大规模使用）来强制覆盖：

/* 更具体的选择器，权重更高 */
.ui-page .ui-input-text input.error {
  border: 2px solid red;
  box-sizing: border-box; /* 关键：让边框包含在元素尺寸内，不会溢出 */
}

/* 或者用!important强制覆盖（简单粗暴） */
input.error {
  border: 2px solid red !important;
  box-sizing: border-box !important;
}

原因2：JQM给input套了外层容器，原生input边框被隐藏 #

JQM会自动把原生<input>包裹在一个带有.ui-input-text类的<div>里，并且默认把原生input的border设为none，转而给外层div添加边框样式。这时候你直接给input加边框，要么看不到，要么因为input在容器里有padding，导致边框看起来没“包裹全”。

解决办法：针对外层容器设置样式 #

这时候你需要把error样式加到外层的.ui-input-text容器上：

/* 当input有error类时，给父容器加红色边框（支持现代浏览器） */
.ui-input-text:has(input.error) {
  border: 2px solid red !important;
}

如果你的项目需要兼容不支持:has选择器的旧浏览器，可以用JS配合：当给input添加error类时，同时给它的父元素（.ui-input-text）也加上error类，然后写样式：

.ui-input-text.error {
  border: 2px solid red !important;
}

额外排查小技巧 #

打开浏览器的开发者工具（F12），选中那个有问题的input元素，查看它的“Styles”面板，看看哪些CSS规则覆盖了你的border属性，这样能快速定位问题所在——我当时就是这么排查出来的！

内容的提问来源于stack exchange，提问作者user7674753