diff --git a/css/src/base/variables.css b/css/src/base/variables.css
index 2f0772a..43246d5 100644
--- a/css/src/base/variables.css
+++ b/css/src/base/variables.css
@@ -143,8 +143,8 @@
   --border-radius-base: 2px;
 
   /* Outlines */
-  --outline--base: 3px solid transparent;
-  --outline-offset: 2px;
+  --outline--thin: 1px solid transparent;
+  --outline--thick: 6px dashed transparent;
 
   /* Header */
   --header-height-wide-when-fixed: calc(6 * var(--sp));
diff --git a/css/src/components/form-boolean.css b/css/src/components/form-boolean.css
index 4a5f833..6f18933 100644
--- a/css/src/components/form-boolean.css
+++ b/css/src/components/form-boolean.css
@@ -29,8 +29,7 @@
   }
 
   &:focus {
-    outline: var(--outline--base);
-    outline-offset: var(--outline-offset);
+    outline: var(--outline--thick);
     box-shadow: var(--shadow-focusable-secondary);
   }
 
diff --git a/css/src/components/form-select.css b/css/src/components/form-select.css
index 007bdd2..a0864c9 100644
--- a/css/src/components/form-select.css
+++ b/css/src/components/form-select.css
@@ -7,6 +7,8 @@
 
 :root {
   --form-element-select-icon: url("../../../images/chevron-down.svg");
+  --form-element-select-bg: url("../../../images/select-chevron-bg-default.svg");
+  --form-element-select-bg--highlight: url("../../../images/select-chevron-bg-highlight.svg");
   --form-element-select-icon-right-offset: var(--sp1);
   --form-element-select-icon-right-offset--small: var(--sp0-75);
   --form-element-select-icon-top-offset: calc(var(--sp1) + var(--form-element-border-size-base));
@@ -17,23 +19,26 @@
 
 select {
   padding-right: calc(var(--sp1) + var(--form-element-select-border-size-right));
-  background:
-    var(--form-element-select-icon) no-repeat right var(--form-element-select-icon-right-offset) top var(--form-element-select-icon-top-offset),
-    linear-gradient(to right, var(--color--gray-30) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%),
-    linear-gradient(to left, var(--color--gray-30) var(--form-element-select-border-size-right), transparent var(--form-element-select-border-size-right), transparent 100%) var(--color--gray-95);
-
-  &:hover {
-    background:
-      var(--form-element-select-icon) no-repeat right var(--form-element-select-icon-right-offset) top var(--form-element-select-icon-top-offset),
-      linear-gradient(to right, var(--color--blue-70) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%),
-      linear-gradient(to left, var(--color--blue-70) var(--form-element-select-border-size-right), transparent var(--form-element-select-border-size-right), transparent 100%) var(--color--gray-95);
-  }
-
+  /*
+    Couple of notes here:
+
+    This select element is styled really weirdly, so it's visible in Firefox in Windows high contrast
+    mode. There's a number of browser bugs that limit what we can do including not linear-gradients negating the
+    entire ruleset. To work around this, we split off the various backgrounds into separate SVG images, and
+    call them as appropriate. We cannot use the background CSS property because we split off the background-color.
+    We also cannot use a left border because it angles at the end to blend in with the top and bottom
+    transparent borders, so we re-use the background SVG image for this.
+  */
+  background-color: var(--color--gray-95);
+  background-image: var(--form-element-select-icon), var(--form-element-select-bg), var(--form-element-select-bg);
+  background-repeat: no-repeat;
+  background-position: right var(--form-element-select-icon-right-offset) center, right 0 top 0, left -48px top 0;
+
+  &:hover,
   &:focus {
-    background:
-      var(--form-element-select-icon) no-repeat right var(--form-element-select-icon-right-offset) top var(--form-element-select-icon-top-offset),
-      linear-gradient(to right, var(--color--blue-70) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%),
-      linear-gradient(to left, var(--color--blue-70) var(--form-element-select-border-size-right), transparent var(--form-element-select-border-size-right), transparent 100%) var(--color--gray-95);
+    background-image: var(--form-element-select-icon), var(--form-element-select-bg--highlight), var(--form-element-select-bg--highlight);
+    background-repeat: no-repeat;
+    background-position: right var(--form-element-select-icon-right-offset) center, right 0 top 0, left -48px top 0;
   }
 
   /* Disables border of select specifically for ms browser */
@@ -43,6 +48,10 @@ select {
 
   &.error {
     background:
+
+    /*
+      big @todo... make the error state of the select element compliant with the new styling above.
+    */
       var(--form-element-select-icon) no-repeat right var(--form-element-select-icon-right-offset) top var(--form-element-select-icon-top-offset),
       linear-gradient(to right, var(--color--red) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%),
       linear-gradient(to left, var(--color--red) var(--form-element-select-border-size-right), transparent var(--form-element-select-border-size-right), transparent 100%) var(--color--gray-95);
@@ -70,6 +79,12 @@ select {
   }
 }
 
+/*
+  @todo
+
+  Make the small select element styled properly with the various background images.
+*/
+
 select.form-element--small {
   padding-right: calc(var(--sp0-75) + var(--form-element-select-border-size-right--small));
   background:
@@ -120,7 +135,7 @@ select.form-element--small {
   }
 }
 
-@media screen and (-ms-high-contrast: active) {
+/* @media screen and (-ms-high-contrast: active) {
   select {
     background: var(--form-element-select-icon) no-repeat right var(--form-element-select-icon-right-offset) top var(--form-element-select-icon-top-offset);
   }
@@ -128,4 +143,4 @@ select.form-element--small {
   select.form-element--small {
     background: var(--form-element-select-icon) no-repeat right var(--form-element-select-icon-right-offset--small) top var(--form-element-select-icon-top-offset--small);
   }
-}
+} */
diff --git a/css/src/components/form-text.css b/css/src/components/form-text.css
index cda0e68..7e415be 100644
--- a/css/src/components/form-text.css
+++ b/css/src/components/form-text.css
@@ -25,6 +25,7 @@ textarea {
   border-style: solid;
   border-color: transparent;
   border-radius: 0 var(--border-radius-base) var(--border-radius-base) 0;
+  outline: var(--outline--thin);
   background: linear-gradient(to right, var(--color--gray-30) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%) var(--color--gray-95);
   font-family: inherit;
   font-size: var(--font-size-base);
@@ -38,10 +39,13 @@ textarea {
 
   &:focus {
     border-color: var(--color--blue-70);
-    outline: var(--outline--base);
-    outline-offset: var(--outline-offset);
+    outline: var(--outline--thick);
     background: linear-gradient(to right, var(--color--blue-70) var(--form-element-border-size-left), transparent var(--form-element-border-size-left), transparent 100%), linear-gradient(to left, var(--color--blue-70) var(--form-element-border-size-base), transparent var(--form-element-border-size-base), transparent 100%) var(--color--gray-95);
     box-shadow: var(--shadow-focusable);
+
+    @supports (outline-style: double) {
+      outline-style: double;
+    }
   }
 
   &::-ms-clear {
@@ -75,26 +79,3 @@ textarea {
     padding: calc((var(--sp2-5) - (var(--font-size-base) * 1.5) - (var(--form-element-border-size-base) * 2)) / 2) calc(var(--sp0-75) + var(--form-element-border-size-base)) calc((var(--sp2-5) - (var(--font-size-base) * 1.5) - (var(--form-element-border-size-base) * 2)) / 2) calc(var(--sp0-75) + var(--form-element-border-size-left));
   }
 }
-
-[type="search"] {
-  appearance: none;
-  box-sizing: border-box;
-}
-
-@media screen and (-ms-high-contrast: active) {
-  [type="text"],
-  [type="search"],
-  [type="tel"],
-  [type="url"],
-  [type="email"],
-  [type="password"],
-  [type="date"],
-  [type="time"],
-  [type="number"],
-  [type="file"],
-  select,
-  textarea {
-    border-right-width: var(--form-element-border-size-base);
-    border-left-width: var(--form-element-border-size-left);
-  }
-}