添加jQuery-Mask-Plugin后输入框hover与focus样式失效问题

这个问题我之前也碰到过，大概率是jQuery-Mask-Plugin修改了你的input类型导致的——因为很多掩码插件对非标准的input类型（比如你用的type="phone"）兼容性不好，会自动把它改成type="text"，这样你原来基于[type='phone']写的CSS选择器就匹配不到聚焦状态的输入框了。

给你几个可行的解决方案：

方案一：改用类选择器（最推荐） #

直接用输入框上的.phone类来写样式规则，这样不管input的type属性怎么变，都能精准匹配：

.order-form input.phone:focus {
  border: 1px solid #345564;
  color: #345564;
}

方案二：检查并调整插件初始化配置 #

如果你一定要保留type="phone"，可以在初始化掩码插件时，确认是否有配置项能阻止它修改input类型。比如：

$('.phone').mask('你的掩码格式', {
  // 示例配置，根据你用的插件版本调整
  placeholder: '请输入手机号',
  // 有些版本可以通过这个选项避免修改type
  clearIfNotMatch: false
});

方案三：提高样式优先级（应急用） #

如果是其他样式覆盖了你的规则，可以通过提高选择器权重来解决，比如加上更多父类或者使用!important（不推荐长期用，会增加样式维护成本）：

.order-form .form-control.phone:focus {
  border: 1px solid #345564 !important;
  color: #345564 !important;
}

另外，你可以打开浏览器开发者工具（F12），选中输入框，查看它的实际type属性和聚焦时的样式计算结果，确认是不是类型被修改或者有其他样式优先级更高的规则在生效。

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