How will I Remove Border From MultiSelect_Chosen Input Form

Question

Please show me what I am doing wrongly with this Multiselect_Chosen Form border removal.

My Razor View Below

            <div class="row">
                <div class="col-md-12 col-sm-8 col-xs-12 col-xs-offset-0">
                    <div id="showDatapointDialog" tabindex="-1" role="dialog" aria-labelledby="showDatapointDialogLabel" aria-hidden="true" class="modal fade" data-keyboard="false" data-backdrop="static">
                        <div class="modal-dialog modal-lg" style="height:40vh; max-height:40vh; width:180vh; max-width:180vh; overflow-y: initial !important">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

                                    <h4 class="modal-title" id="showDatapointDialogLabel">Claim Data Input Selection</h4>
                                </div>
                                <div class="modal-body" style="height: 350px; overflow-y: auto; ">
                                    <div class="row">
                                        <div class="col-md-12 col-sm-12 col-xs-12">
                                            <div class="form-group">
                                                @Html.Label("Main Columns(Fields)", htmlAttributes: new { @class = "control-label col-md-2" })
                                                <div class="col-md-10">
                                                    @Html.DropDownListFor(m => m.MainSelectedFields,
                                                    new MultiSelectList(Model.MainSelectableFields, "DatabaseFieldName", "DisplayName", Model.MainSelectedFields),

                                                    new
                                                    {
                                                    @multiple = "multiple",
                                                    @class = "chosen-select",
                                                    @data_placeholder = "Select...",
                                                    @style = "width: 100%; border: none;"

                                                    })

                                                    @Html.ValidationMessageFor(model => model.MainSelectableFields, "", new { @class = "text-danger" })
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <br />
                                    <div class="row">
                                        <div class="col-md-12 col-sm-12 col-xs-12">
                                            <div class="form-group">
                                                @Html.Label("Applicable Deductions", htmlAttributes: new { @class = "control-label col-md-2" })
                                                <div class="col-md-10">
                                                    @Html.DropDownListFor(m => m.FDCSelectedFields,
                                                    new MultiSelectList(Model.FDCSelectableFields, "DatabaseFieldName", "DisplayName", Model.FDCSelectedFields),

                                                    new
                                                    {
                                                    @multiple = "multiple",
                                                    @class = "chosen-select",
                                                    @data_placeholder = "Select...",
                                                    @style = "width: 100%; border: none;"

                                                    })

                                                    @Html.ValidationMessageFor(model => model.FDCSelectableFields, "", new { @class = "text-danger" })
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <br />
                                    <div class="row">
                                        <div class="col-md-12 col-sm-12 col-xs-12">
                                            <div class="form-group">
                                                @Html.Label("Applicable Penalties", htmlAttributes: new { @class = "control-label col-md-2" })
                                                <div class="col-md-10">
                                                    @Html.DropDownListFor(m => m.MCPSelectedFields,
                                                    new MultiSelectList(Model.MCPSelectableFields, "DatabaseFieldName", "DisplayName", Model.MCPSelectedFields),

                                                    new
                                                    {
                                                    @multiple = "multiple",
                                                    @class = "chosen-select",
                                                    @data_placeholder = "Select...",
                                                    @style = "width: 100%; border: none;"

                                                    })

                                                    @Html.ValidationMessageFor(model => model.MCPSelectableFields, "", new { @class = "text-danger" })
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <br />
                                    <div class="row">
                                        <div class="col-md-12 col-sm-12 col-xs-12">
                                            <div class="form-group">
                                                @Html.Label("Has Policy Excess?", htmlAttributes: new { @class = "control-label col-md-2" })
                                                <div class="col-md-10">
                                                    @Html.DropDownListFor(m => m.LDCSelectedFields,
                                                    new MultiSelectList(Model.LDCSelectableFields, "DatabaseFieldName", "DisplayName", Model.LDCSelectedFields),

                                                    new
                                                    {
                                                    @multiple = "multiple",
                                                    @class = "chosen-select",
                                                    @data_placeholder = "Select...",
                                                    @style = "width: 100%; border: none;"

                                                    })

                                                    @Html.ValidationMessageFor(model => model.LDCSelectableFields, "", new { @class = "text-danger" })
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer" style="background:#e8c8d8; border-radius:8px">
                                    <button id="claimScheduleBtn" type="button" class="btn btn-primary" data-dismiss="modal" onclick="SetupClaimSchedule(this);">Claim Schedule Setup</button>
                                    <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

Current result

Expected Result output sample after the remove of the border marked X in red above.

CSS Style is below

#MainSelectedFields_chosen,
#FDCSelectedFields_chosen,
#MCPSelectedFields_chosen,
#LDCSelectedFields_chosen {
    border: none !important;
}

    #MainSelectedFields_chosen .chosen-choices,
    #FDCSelectedFields_chosen .chosen-choices,
    #MCPSelectedFields_chosen .chosen-choices,
    #LDCSelectedFields_chosen .chosen-choices {
        border: none !important;
        background-image: none !important;
        background-color: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

        #MainSelectedFields_chosen .chosen-choices li.search-choice,
        #FDCSelectedFields_chosen .chosen-choices li.search-choice,
        #MCPSelectedFields_chosen .chosen-choices li.search-choice,
        #LDCSelectedFields_chosen .chosen-choices li.search-choice {
            border: none !important;
            background: #f3f3f3 !important;
            box-shadow: none !important;
            padding: 5px 20px 5px 10px !important;
            margin: 3px !important;
        }


    #MainSelectedFields_chosen.chosen-container-active .chosen-choices,
    #FDCSelectedFields_chosen.chosen-container-active .chosen-choices,
    #MCPSelectedFields_chosen.chosen-container-active .chosen-choices,
    #LDCSelectedFields_chosen.chosen-container-active .chosen-choices {
        border: none !important;
        box-shadow: none !important;
    }

My Javascript below

			
 <script src="~/Scripts/jquery.min.js"></script>
 <script src="~/Scripts/chosen.jquery.min.js"></script>
 <script src="~/Scripts/summernote-lite.js"></script>
 <script type="text/javascript">
     $(document).ready(function () {
         // Initialize Chosen with specific options
         $(".chosen-select").chosen({
             width: "100%",
             search_contains: true,
             inherit_select_classes: true
         });
         // Function to remove borders
         function removeChosenBorders() {
             $('.chosen-container .chosen-choices').css({
                 'border': 'none',
                 'box-shadow': 'none',
                 'background-image': 'none',
                 'background-color': 'transparent'
             });
         }
    
		 // Apply immediately
     		removeChosenBorders();

			$(function () {
				$('.multiselect').multiselect({
					includeSelectAllOption: true
				});
			});

Your response is anticipated and will be greatly appreciated.

Best regards,

Lawrence

Answer 1

Thank you so much everyone.

I found the answer which I credited to @MohaNed Ghawar who solved similar problem for me yesterday on Email issue. Please find the amended Javascript below. Every other thing is correct except the JavaScript.

<script src="~/Scripts/jquery.min.js"></script>
<script src="~/Scripts/chosen.jquery.min.js"></script>
<script src="~/Scripts/summernote-lite.js"></script>
<script type="text/javascript">

    $(document).ready(function () {

        // Initialize Chosen with specific options

        $(".chosen-select").chosen({
            width: "100%",
            search_contains: true,
            inherit_select_classes: true
        });

        // Function to remove borders
        function removeChosenBorders() {

            $('.chosen-container .chosen-choices').css({
                'border': 'none',
                'box-shadow': 'none',
                'background-image': 'none',
                'background-color': 'transparent'
            });

        }

        // Apply immediately
        removeChosenBorders();

        // Handle dynamic updates
        $('.chosen-select').on('chosen:showing_dropdown chosen:hiding_dropdown chosen:updated', function () {
            removeChosenBorders();
        });

        // Observer for dynamic changes
        const observer = new MutationObserver(function (mutations) {
            removeChosenBorders();
        });

        // Observe both select containers
        $('.chosen-container').each(function () {
            observer.observe(this, {
                childList: true,
                subtree: true,
                attributes: true
            });
        });
    });

@MohaNed Ghawar Thank you for your assistance.

Best regards,

Lawrence