diff --git a/_includes/examples/input-select-disabled-focusable.html b/_includes/examples/input-select-disabled-focusable.html
index 0958a7fb..3fe1b36c 100644
--- a/_includes/examples/input-select-disabled-focusable.html
+++ b/_includes/examples/input-select-disabled-focusable.html
@@ -1,11 +1,9 @@
-
-
- Select a Nato phonetic Letter
-
-
- None
- Alpha
- Bravo
- Charlie
-
-
\ No newline at end of file
+
+ Select a Nato phonetic Letter
+
+
+ None
+ Alpha
+ Bravo
+ Charlie
+
diff --git a/_includes/examples/input-select-disabled.html b/_includes/examples/input-select-disabled.html
index 8275dce1..bce3d890 100644
--- a/_includes/examples/input-select-disabled.html
+++ b/_includes/examples/input-select-disabled.html
@@ -1,11 +1,9 @@
-
-
- Select a Nato phonetic Letter
-
-
- None
- Alpha
- Bravo
- Charlie
-
-
\ No newline at end of file
+
+ Select a Nato phonetic Letter
+
+
+ None
+ Alpha
+ Bravo
+ Charlie
+
diff --git a/_includes/examples/input-select.html b/_includes/examples/input-select.html
index 4e450247..32631138 100644
--- a/_includes/examples/input-select.html
+++ b/_includes/examples/input-select.html
@@ -1,11 +1,9 @@
-
-
- Select a Nato phonetic Letter
-
-
- Select a letter
- Alpha
- Bravo
- Charlie
-
-
\ No newline at end of file
+
+ Select a Nato phonetic Letter
+
+
+ Select a letter
+ Alpha
+ Bravo
+ Charlie
+
\ No newline at end of file
diff --git a/_sass/modules/_input-select.scss b/_sass/modules/_input-select.scss
index 9e726e9b..7c3f9634 100644
--- 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;
+ }
+}