How Do I remove Form outline From JavaScript Multi-Select Form

Question

Please I would like to remove form outline around multi-select form as shown below mark in red. The user get confused thinking they should add the email on the To: and Cc: 2nd Form rows rather than the Add new (To and Cc) 1st Form rows.

EmailNotification popup

The result expected should be as shown in the image below

Email multiselectSample

You will notice that there is no border/outline around the already selected names underline in red above. That is the result I love to achieve.

I have tried using the HTML style below but to no avail.

style="outline: none"

My HTML script

	
		
			
				
					
						
							
							Insurer Notification Email Selection
						
                        
                            
                                
                                    
                                        @Html.Label("Add new(To)", htmlAttributes: new { @class = "control-label col-md-2" })
                                        
                                            
                                        
                                        
                                            
                                        
                                    
                                
                            
                            
                                
                                    
                                        @Html.Label("To:", htmlAttributes: new { @class = "control-label col-md-2" })
                                        
                                            @Html.DropDownListFor(m => m.SelectedNotificationMails, new MultiSelectList(Model.SelectableNotificationMails, "KeyID", "KeyDescription", Model.SelectedNotificationMails), new { @multiple = "multiple", placeholder = "Select..." })
                                            @Html.ValidationMessageFor(model => model.SelectableNotificationMails, "", new { @class = "text-danger" })
                                        
                                    
                                
                            
                            

                            
                                
                                    
                                        @Html.Label("Add new(Cc)", htmlAttributes: new { @class = "control-label col-md-2" })
                                        
                                            
                                        
                                        
                                            
                                        
                                    
                                
                            
                            
                                
                                    
                                        @Html.Label("Cc:", htmlAttributes: new { @class = "control-label col-md-2" })
                                        
                                            @Html.DropDownListFor(m => m.SelectedCCNotificationMails, new MultiSelectList(Model.SelectableCCNotificationMails, "KeyID", "KeyDescription", Model.SelectedCCNotificationMails), new { @multiple = "multiple", placeholder = "Select..."})
                                            @Html.ValidationMessageFor(model => model.SelectableCCNotificationMails, "", new { @class = "text-danger" })
                                        
                                    
                                
                            
                        
						
							Cancel

JavaScript

		function validateEmail(email) {

			return /^[\w-]+(\.[\w-]+)*@@([a-z0-9-]+(\.[a-z0-9-]+)*?\.[a-z]{2,6}|(\d{1,3}\.){3}\d{1,3})(:\d{4})?$/.test(email);
		}

		function addNewItemToList(ctrl) {

			var value = document.getElementById(ctrl).value;
			if (value == null || value == "") {
				BootstrapDialog.alert("Please enter a valid email address");
				return;
			}
			var list = value.split(",");

			for (i = 0; i < list.length; i++) {
				if (!validateEmail(list[i])) {
					BootstrapDialog.alert("Please enter a valid email address (" + list[i] + ")");
					return;
				} 
			}

			for (i = 0; i < list.length; i++) {
				var v2 = list[i];
				var key = v2.replaceAll("@@", "___").replaceAll(".", "__");
				$('#SelectedNotificationMails').append("");
				$("#SelectedNotificationMails option[value=" + key + "]").attr('selected', true);

				$('#SelectedNotificationMails').trigger('chosen:updated');
				document.getElementById(ctrl).value = "";
			}			
		}

		function addNewCcItemToList(ctrl) {

			var value = document.getElementById(ctrl).value;
			if (value == null || value == "") {
				BootstrapDialog.alert("Please enter a valid email address");
				return;
			}
			var list = value.split(",");

			for (i = 0; i < list.length; i++) {
				if (!validateEmail(list[i])) {
					BootstrapDialog.alert("Please enter a valid email address (" + list[i] + ")");
					return;
				}
			}

			for (i = 0; i < list.length; i++) {
				var v2 = list[i];
				var key = v2.replaceAll("@@", "___").replaceAll(".", "__");
				$('#SelectedCCNotificationMails').append("");
				$("#SelectedCCNotificationMails option[value=" + key + "]").attr('selected', true);

				$('#SelectedCCNotificationMails').trigger('chosen:updated');
				document.getElementById(ctrl).value = "";
			}	
		}

Thanking you in anticipation of your kind response.

Best regards,

Lawrence

Accepted Answer

First, add this CSS in the section or in a separate CSS file:

Modify your DropDownListFor to include the necessary classes and attributes:

@Html.DropDownListFor(m => m.SelectedNotificationMails,

new MultiSelectList(Model.SelectableNotificationMails, "KeyID", "KeyDescription", Model.SelectedNotificationMails),

new {

@multiple = "multiple",

@class = "chosen-select",

@data_placeholder = "Select...",

@style = "width: 100%; border: none;"

})

@Html.DropDownListFor(m => m.SelectedCCNotificationMails,

new MultiSelectList(Model.SelectableCCNotificationMails, "KeyID", "KeyDescription", Model.SelectedCCNotificationMails),

new {

@multiple = "multiple",

@class = "chosen-select",

@data_placeholder = "Select...",

@style = "width: 100%; border: none;"

})

Add this JavaScript code after your existing JavaScript (make sure it's after jQuery and chosen.jquery.js):

$(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();

// Modify your existing functions

var originalAddNewItemToList = addNewItemToList;

addNewItemToList = function(ctrl) {

originalAddNewItemToList(ctrl);

removeChosenBorders();

};

var originalAddNewCcItemToList = addNewCcItemToList;

addNewCcItemToList = function(ctrl) {

originalAddNewCcItemToList(ctrl);

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

});

Make sure these scripts are included in the correct order:

Answer

I'll provide you with the CSS code that you can add to your project's stylesheet or within a

In your site's main CSS file (often found in Content/Site.css or similar)

Create a new CSS file specifically for your email notification styles and reference it in your layout or view

Share via

How Do I remove Form outline From JavaScript Multi-Select Form

1 additional answer

Your answer