--- a/mail/base/content/messenger.xul
+++ b/mail/base/content/messenger.xul
@@ -662,17 +662,20 @@
           <hbox id="dummycontenttoolbar" class="contentTabToolbar">
             <toolbarbutton class="back-btn nav-button"
                            disabled="true"/>
             <toolbarbutton class="forward-btn nav-button"
                            disabled="true"/>
             <toolbaritem class="contentTabAddress" align="center" flex="1">
               <hbox align="center" flex="1">
                 <image class="contentTabSecurity"/>
-                <label class="contentTabUrlbar" flex="1"/>
+                <hbox flex="1" class="contentTabUrlbar input-container">
+                  <html:input class="input-inline themeableSearchBox"
+                              readonly="readonly"/>
+                </hbox>
               </hbox>
             </toolbaritem>
           </hbox>
         </vbox>
         <stack flex="1">
           <browser id="dummycontentbrowser" type="content" flex="1"
                    disablehistory="true" autocompletepopup="PopupAutoComplete"
                    datetimepicker="DateTimePickerPanel" context="mailContext"/>

--- a/mail/base/content/specialTabs.js
+++ b/mail/base/content/specialTabs.js
@@ -105,17 +105,17 @@ tabProgressListener.prototype = {
       ) {
         this.mBrowser.mIconURL = null;
       }
 
       var location = aLocationURI ? aLocationURI.spec : "";
       if (aLocationURI && !aLocationURI.schemeIs("about")) {
         this.mTab.backButton.disabled = !this.mBrowser.canGoBack;
         this.mTab.forwardButton.disabled = !this.mBrowser.canGoForward;
-        this.mTab.urlbar.textContent = location;
+        this.mTab.urlbar.value = location;
         this.mTab.root.removeAttribute("collapsed");
       } else {
         this.mTab.root.setAttribute("collapsed", "false");
       }
 
       // Set the reload command only if this is a report that is coming in about
       // the top-level content location change.
       if (aWebProgress.DOMWindow == this.mBrowser.contentWindow) {
@@ -866,18 +866,18 @@ var specialTabs = {
       aTab.toolbar = aTab.panel.querySelector(".contentTabToolbar");
       aTab.backButton = aTab.toolbar.querySelector(".back-btn");
       aTab.backButton.addEventListener("command", () => aTab.browser.goBack());
       aTab.forwardButton = aTab.toolbar.querySelector(".forward-btn");
       aTab.forwardButton.addEventListener("command", () =>
         aTab.browser.goForward()
       );
       aTab.security = aTab.toolbar.querySelector(".contentTabSecurity");
-      aTab.urlbar = aTab.toolbar.querySelector(".contentTabUrlbar");
-      aTab.urlbar.textContent = aArgs.contentPage;
+      aTab.urlbar = aTab.toolbar.querySelector(".contentTabUrlbar > input");
+      aTab.urlbar.value = aArgs.contentPage;
 
       ExtensionParent.apiManager.emit(
         "extension-browser-inserted",
         aTab.browser
       );
 
       // As we're opening this tab, showTab may not get called, so set
       // the type according to if we're opening in background or not.

--- a/mail/themes/shared/mail/tabmail.css
+++ b/mail/themes/shared/mail/tabmail.css
@@ -357,16 +357,17 @@
 /* Both rules are needed to work properly when re-activating the window */
 .contentTabUrlbar:-moz-window-inactive,
 .contentTabUrlbar:-moz-window-inactive::selection {
   background-color: transparent;
   color: inherit;
 }
 
 .contentTabSecurity {
+  position: relative;
   height: 16px;
   width: 16px;
   margin: 2px;
   margin-inline-end: 5px;
   background-repeat: no-repeat;
 }
 
 .contentTabSecurity[level="high"] {
@@ -387,22 +388,28 @@
 
 @media (min-resolution: 1.1dppx) {
   #security-button[loading="true"] {
     background-image: url("chrome://global/skin/icons/loading@2x.png");
     background-size: 16px;
   }
 }
 
-.contentTabAddress * {
-  -moz-user-select: text;
+.contentTabAddress {
+  max-width: 100%;
+  overflow-x: hidden;
 }
 
 .contentTabUrlbar {
-  margin: 0;
+  max-width: 100%;
+  margin-inline-start: -30px;
+}
+
+.contentTabUrlbar > .input-inline {
+  padding-inline-start: 25px;
 }
 
 .nav-button {
   -moz-appearance: none;
   list-style-image: url(chrome://messenger/skin/icons/navigation.svg);
   border: 1px solid transparent;
   border-radius: 2px;
   margin: 5px 2px;