Within my application, I have implemented a feature where required fields are designated with a red border. To achieve this effect, I utilized the following CSS code:
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;
}
Initially, this functionality worked as intended. However, I encountered an issue when incorporating Select2 dropdowns into the application. To address this, I assigned a class of 'select-two' to the required drop-down menus like so:
@Html.DropDownListFor(model => model.DocumentId, new SelectList(Model.Documents, "LRMISDocumentId", "DocumentName"), Resources.Select, new { id = "documents", Class = "select-two form-control" })
Upon implementing Select2 for elements with the 'select-two' class, I noticed that the red border was no longer visible. What could be causing this unexpected behavior?