Few CSS and JS corrections

assets/css/full-screen-morphing-search.css

@@ -73,6 +73,7 @@
 	height: 100%;
 	font-style: italic;
 	color: #ec5a62;
+	outline: none;
 	/* Using ID '#morphsearch' to avoid using !important */
 }
 
@@ -158,6 +159,17 @@ input[type="search"] {
 .morphsearch-submit:hover {
 	background-color: transparent;
 	box-shadow: none;
+	background-image: none;
+	border: none;
+	padding: 0;
+}
+
+.morphsearch-submit:active {
+	background-color: transparent;
+	box-shadow: none;
+	background-image: none;
+	border: none;
+	padding: 0;
 }
 
 /* 3- Hidding the Morphing Search Page once the .close class is added to the main div  */
@@ -219,6 +231,10 @@ input[type="search"] {
 	color: #333;
 	margin-top: 4.5em;
 	width: 100%;
+	/* Firefox: old themes */
+	width: -moz-available;
+	/* Chrome: old themes */
+	width: -webkit-fill-available;
 	height: 0;
 	overflow: hidden;
 	padding: 0 10.5%;

assets/js/full-screen-morphing-search.js

@@ -2,7 +2,7 @@
 ( function( $ ) {
 
 	// Display the Full Screen search when The user focuses on a search field.
-	$( 'form[role=search] input' ).on( 'focus', function( event ) {
+	$( 'form[role=search] input, form input[id=s]' ).on( 'focus', function( event ) {
 		// Prevent the default action.
 		event.preventDefault();
 
@@ -13,7 +13,7 @@
 		 * 1- Focus on the Full Screen Morphing Search Input Field, but not if the site is being previewed in the Customizer.
 		 * This first decision was taken because of weird behaviour in Chrome and Edge...
 		 * 2- Focusing on the input of Full Screen Morphing Search Input Field by a setTimeout() to avoid a recursive function. 
-		 * The main function is called upon 'focus' on any $('form[role=search] input'),
+		 * The main function is called upon 'focus' on any $( 'form[role=search] input, form input[id=s]' ),
 		 * so if we focus directly on the .morphsearch-input it will be a recursive function
 		 * since the two inputs are in a 'form[role=search]' !
 		 * Recursive function :@see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Too_much_recursion
@@ -22,8 +22,8 @@
 		 * 
 		 */
 		if (!fsmsp_vars.fsmsp_is_customize_preview) {
-			setTimeout(function () {
+			setTimeout( function() {
-				$('#morphsearch > form > input.morphsearch-input').focus();
+				$( '#morphsearch > form > input.morphsearch-input' ).focus();
 			}, 500);
 		}
 	} );
@@ -34,6 +34,7 @@
 		event.preventDefault();
 
 		// Hide the Morphing Search Page.
+		$( 'form input[id=s]' ).blur();
 		$( '.morphsearch' ).removeClass( 'open' );
 	} );
 
@@ -44,20 +45,21 @@
 	 * when we press the Esc button .morphsearch will close then reopen.
 	 * Since it's focus(), pressing on Esc will close it but send another focus() after 500ms !
 	 * To prevent this behaviour when the Esc button is pressed,
-	 * we blur() all $('form[role=search] input') including $('.morphsearch input.morphsearch-input'),
+	 * we blur() all $( 'form[role=search] input, form input[id=s]' ) including $('.morphsearch input.morphsearch-input'),
 	 * then we removeClass('open') from $('.morphsearch').
 	 * 
 	 */
-	$('.morphsearch').on('keydown', function (event) {
+	$( '.morphsearch' ).on( 'keydown' , function( event ) {
-		if (event.keyCode === 27 && !fsmsp_vars.fsmsp_is_customize_preview) {
+		if ( event.keyCode === 27 && !fsmsp_vars.fsmsp_is_customize_preview ) {
-			$('form[role=search] input').blur();
+			$( 'form[role=search] input, form input[id=s]' ).blur();
-			$('.morphsearch').removeClass('open');
+			$( '.morphsearch' ).removeClass( 'open' );
 		}
 	});
 
 	// Reset Morphing Search Input Value to Search...
-	$('input.search-field').val('');
+	$( 'input.search-field' ).val('');
 
+	// Output default options' values !
 	if ( fsmsp_vars.fsmsp_options_does_not_exists ) {
 
 		// Output fsmsp_main_backgroung_color.