ASP.NET MVC中下拉框input-validation-error样式不生效问题

我之前也碰到过一模一样的问题！其实根源是CSS优先级冲突——你定义的select.input-validation-error选择器优先级比Bootstrap的.form-control类低，导致红色边框样式被默认的表单控件样式覆盖了。

下面是具体的解决步骤：

• 首先确认你的site.css是在Bootstrap样式文件之后引入的，只有这样自定义样式才能覆盖框架默认样式。
• 修改site.css中的验证错误样式，提升选择器优先级：

  /* 用两个类选择器组合，优先级高于单个.form-control */
  .form-control.input-validation-error {
      border: 2px solid red;
  }
  

  如果你只想针对下拉框生效，可以再加上标签限定：

  select.form-control.input-validation-error {
      border: 2px solid red;
  }
  

如果还是没生效，建议打开浏览器开发者工具（按F12），选中这个下拉框元素，查看「样式」面板，看看哪个样式在覆盖你的红色边框，再针对性地调整选择器的优先级即可。

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