Выпадающий список Select2 удаляет требуемый цвет границы?

В моем приложении границы обязательных полей отображаются красным цветом. Я написал следующий 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 в приложении. Я добавляю класс select-two для тех раскрывающихся списков, которые требуются следующим образом:

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

Затем я реализую select2, где используется класс select-two. Теперь проблема в том, что когда я использую раскрывающийся список select2, красная рамка исчезает. В чем проблема?


jquery css asp.net-mvc select2
person umer    schedule 13.10.2016    source источник
comment
Select2 скрывает элемент <select>, сгенерированный DropDownListFor(), и заменяет его собственным html.   -  person    schedule 13.10.2016
comment
Что мне делать для обязательных полей, в которых используется select2?   -  person umer    schedule 13.10.2016
comment
Вы можете установить CSS, используя идентификатор элемента Select вместо того, чтобы устанавливать его для общего элемента выбора.   -  person AshishJindal    schedule 13.10.2016
comment
С этим связано множество проблем. jquery.validate.js не проверяет скрытые поля, поэтому вам необходимо переопределить валидатор (см. этот ответ. Тогда вам, вероятно, потребуется обработать событие .change(), чтобы определить, действительно ли оно действительно или нет (функция .isValid()), а если нет, добавить другое имя класса, которое добавляет границу (вам нужно будет проверить html и css, который генерируется Select2   -  person    schedule 13.10.2016
comment
@AshishJindal Я хочу сделать это глобально в одном месте.   -  person umer    schedule 13.10.2016
comment
@Umer: проверьте эту ссылку - stackoverflow.com/questions/37130371/   -  person AshishJindal    schedule 13.10.2016
comment
Я уже сделал это. Проблема в том, что когда я использую select2, он удаляет красную рамку.   -  person umer    schedule 13.10.2016

Ответы (1)


arrow_upward
1
arrow_downward

Это будет работать:

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

https://jsfiddle.net/kblau237/g44g902o/ — это jsfiddle без API Microsoft MVC.

person kblau    schedule 13.10.2016
comment
Это не связано с моим вопросом. На самом деле я хочу показать красную рамку, где требуются поля. Однако я решил проблему, создав новый класс и реализовав этот класс там, где требуются поля. И ваш ответ поможет мне в этом случае. Спасибо. - person umer; 18.10.2016