From 6f694244dfbc171f0822cc54dcad214703e63680 Mon Sep 17 00:00:00 2001
From: Spencer Canner <spencer.canner@shopify.com>
Date: Tue, 10 Nov 2020 11:17:02 -0500
Subject: [PATCH 1/2] set border style on select element instead of parent div

---
 src/styles/embeds/sass/components/select.css | 9 ++++++---
 src/styles/embeds/sass/variables.css         | 1 +
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/styles/embeds/sass/components/select.css b/src/styles/embeds/sass/components/select.css
index 1997ba74..6f443f78 100644
--- a/src/styles/embeds/sass/components/select.css
+++ b/src/styles/embeds/sass/components/select.css
@@ -1,6 +1,4 @@
 .shopify-buy__option-select-wrapper {
-  border: 1px solid var(--color-border);
-  border-radius: 3px;
   box-sizing: border-box;
   position: relative;
   background: var(--color-white);
@@ -44,7 +42,8 @@
   font-size: inherit;
   padding: 7px 10px;
   padding-right: 32px;
-  border: 0;
+  border: 1px solid var(--color-border);
+  border-radius: 3px;
   width: 100%;
   background: transparent;
   -webkit-appearance: none;
@@ -53,6 +52,10 @@
   &::-ms-expand {
     display: none;
   }
+
+  &:focus {
+    border-color: var(--color-border-focus);
+  }
 }
 
 .shopify-buy__btn--parent {
diff --git a/src/styles/embeds/sass/variables.css b/src/styles/embeds/sass/variables.css
index 9791c659..a1f323e9 100644
--- a/src/styles/embeds/sass/variables.css
+++ b/src/styles/embeds/sass/variables.css
@@ -7,6 +7,7 @@
   --color-title: #4c4c4c;
   --color-cart-title: #767676;
   --color-border: #d3dbe2;
+  --color-border-focus: #b3b3b3;
   --color-quantity-border: #767676;
   --color-border-primary: #79ab61;
   --gutter: 15px;

From 393c829705d9360a2eb844e029f379330cc84c79 Mon Sep 17 00:00:00 2001
From: Spencer Canner <spencer.canner@shopify.com>
Date: Tue, 10 Nov 2020 14:09:15 -0500
Subject: [PATCH 2/2] add select focus outline for ms high contrast

---
 src/styles/embeds/sass/components/select.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/styles/embeds/sass/components/select.css b/src/styles/embeds/sass/components/select.css
index 6f443f78..56a0e246 100644
--- a/src/styles/embeds/sass/components/select.css
+++ b/src/styles/embeds/sass/components/select.css
@@ -55,6 +55,10 @@
 
   &:focus {
     border-color: var(--color-border-focus);
+
+    @media (-ms-high-contrast: active) {
+      outline: 1px solid var(--color-white);
+    }
   }
 }