Refactored select

Removed :before arrow, swapped for simpler background image to make integration in forms easier.
tmobile · Jun 29, 2023 · 5707eec · 5707eec
1 parent fdbf0dd
commit 5707eec
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 38 deletions.
diff --git a/_includes/examples/input-select-disabled-focusable.html b/_includes/examples/input-select-disabled-focusable.html
@@ -1,11 +1,9 @@
-<div class="select-container">
-  <label for="nato-disabled-focusable">
-    Select a Nato phonetic Letter
-  </label>
-  <select id="nato-disabled-focusable" aria-disabled="true">
-    <option value="None" disabled>None</option>
-    <option value="A" disabled selected>Alpha</option>
-    <option value="B" disabled>Bravo</option>
-    <option value="C" disabled>Charlie</option>
-  </select>
-</div>
+<label for="nato-disabled-focusable">
+  Select a Nato phonetic Letter
+</label>
+<select id="nato-disabled-focusable" aria-disabled="true">
+  <option value="None" disabled>None</option>
+  <option value="A" disabled selected>Alpha</option>
+  <option value="B" disabled>Bravo</option>
+  <option value="C" disabled>Charlie</option>
+</select>
diff --git a/_includes/examples/input-select-disabled.html b/_includes/examples/input-select-disabled.html
@@ -1,11 +1,9 @@
-<div class="select-container">
-  <label for="nato-disabled">
-    Select a Nato phonetic Letter
-  </label>
-  <select id="nato-disabled" disabled>
-    <option value="None">None</option>
-    <option value="A">Alpha</option>
-    <option value="B" selected>Bravo</option>
-    <option value="C">Charlie</option>
-  </select>
-</div>
+<label for="nato-disabled">
+  Select a Nato phonetic Letter
+</label>
+<select id="nato-disabled" disabled>
+  <option value="None">None</option>
+  <option value="A">Alpha</option>
+  <option value="B" selected>Bravo</option>
+  <option value="C">Charlie</option>
+</select>
diff --git a/_includes/examples/input-select.html b/_includes/examples/input-select.html
@@ -1,11 +1,9 @@
-<div class="select-container">
-  <label for="nato">
-    Select a Nato phonetic Letter
-  </label>
-  <select id="nato">
-    <option value="None" selected disabled>Select a letter</option>
-    <option value="A">Alpha</option>
-    <option value="B">Bravo</option>
-    <option value="C">Charlie</option>
-  </select>
-</div>
+<label for="nato">
+  Select a Nato phonetic Letter
+</label>
+<select id="nato">
+  <option value="None" selected disabled>Select a letter</option>
+  <option value="A">Alpha</option>
+  <option value="B">Bravo</option>
+  <option value="C">Charlie</option>
+</select>
diff --git a/_sass/modules/_input-select.scss b/_sass/modules/_input-select.scss
@@ -8,22 +8,23 @@ select {
   display: inline-block;
   border-radius: .25rem;
   border: 2px solid $color-input-border;
-  margin: 0 0 calc(2rem + 2px) 1rem;
+  margin: 0 0 calc(2rem + 2px) 0;
   display: inline-block;
   justify-self: start;
   font-size: 1rem;
   @include regular;
   padding: .75rem 3.5rem .75rem .5rem !important;
   cursor: pointer;
-
-  box-shadow: 0 0px 4px 1px rgba(#000, .2);
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
 
-  &:hover {
+  &:hover,
+  &:focus,
+  &:focus-visible,
+  &:active {
     border: .125rem solid darken($color-input-border, 50);
-    background-image: var(--icon-chevron-gray);
+    box-shadow: 0 0px 4px 1px rgba(#000, .2);
   }
 
   option {
@@ -45,3 +46,8 @@ select::-ms-expand {
   display: none;
 }
 
+fieldset {
+  select {
+    margin-left: 1rem;
+  }
+}