【问题标题】:Select2 Drop down removes the required border color?Select2下拉删除所需的边框颜色?
【发布时间】:2016-10-13 07:03:23
【问题描述】:

在我的应用程序中,必填字段边框以红色显示。我为必填字段编写了以下css:

input[data-val-required], select[data-val-required] {
    border: 1px solid #EFA4A4 !important;
}

select[data-val-required], select[data-val-required] {
    border: 1px solid #EFA4A4 !important;
}

它对我来说很好用。然后我需要在应用程序中使用 Select2 Drop down。我为那些需要的下拉列表添加了类 select-two:

@Html.DropDownListFor(model => model.DocumentId, new SelectList(Model.Documents, "LRMISDocumentId", "DocumentName"), Resources.Select, new { id = "documents", Class = "select-two form-control" })

然后我在使用 select-two 类的地方实现 select2。现在的问题是当我使用 select2 下拉菜单时,红色边框消失了。有什么问题?

【问题讨论】:

  • Select2 隐藏了DropDownListFor() 生成的<select> 元素,并将其替换为自己的html。
  • 实现了select2的必填字段该怎么办?
  • 您可以使用 Select 元素的 ID 设置 CSS,而不是为通用选择元素设置它。
  • 这有很多问题。 jquery.validate.js 不验证隐藏字段,因此您需要覆盖验证器(请参阅 this answer。然后您可能需要处理 .change() 事件以确定其是否有效(.isValid() 函数)以及是否不是,添加另一个添加边框的类名(您需要检查由 Select2 生成的 html 和 css
  • @AshishJindal 我想在一个地方在全球范围内进行。

标签: jquery css asp.net-mvc select2


【解决方案1】:

这将起作用:

<style type="text/css">
    .select2-container--default{
        border-radius: 5px;
        border: 1px solid red;
    }
</style>

https://jsfiddle.net/kblau237/g44g902o/ 是没有 Microsoft MVC API 的 jsfiddle

【讨论】:

  • 这与我的问题无关。实际上我想在需要字段的地方显示红色边框。但是,我通过创建新类并在需要字段的地方实现此类来解决问题。在这种情况下,您的回答对我有帮助。谢谢。
猜你喜欢
  • 2023-03-26
  • 1970-01-01
  • 2015-02-24
  • 2014-03-14
  • 1970-01-01
  • 1970-01-01
  • 2021-09-03
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多