adding #13

public/plain-ui.css

@@ -2261,7 +2261,6 @@ input.field-text, textarea.field-text, select.field-choice {
   font-size: 0.95rem;
   width: 100%;
   border: 1px solid #a4a4a4;
-  background-color: var(--background-contrast);
   border-radius: 2px;
   margin: 0.7rem 0 0;
 }
@@ -2284,17 +2283,13 @@ select.field-choice {
      -moz-appearance: none;
           appearance: none;
   padding: 0.8em;
-  position: relative;
+  background-image: linear-gradient(to right, #717171, #717171);
+  background-position: 100%;
+  background-size: 1.5rem 100%;
+  background-repeat: no-repeat;
 }
-select.field-choice::after {
+select.field-choice:active, select.field-choice:focus {
-  position: absolute;
+  background-image: linear-gradient(to right, #3e3e3e, #3e3e3e);
-  right: 0;
-  top: 0;
-  display: block;
-  content: " ";
-  width: 10px;
-  height: 10px;
-  background: red;
 }
 
 /**

src/scss/components/_field.scss

@@ -49,7 +49,6 @@ input.field-text, textarea.field-text, select.field-choice {
     width: 100%;
 
     border: 1px solid lighten($color__primary, 40%);
-    background-color: var(--background-contrast);
     border-radius: $border-radius;
 
     margin: 0.7rem 0 0;
@@ -74,17 +73,18 @@ input.field-text, textarea.field-text {
 select.field-choice {
     appearance: none;
     padding: 0.8em;
-    position: relative;
 
-    &::after {
+    background-image:
-        position: absolute;
+        linear-gradient(to right, $color__active, $color__active);
-        right: 0;
+    background-position:
-        top: 0;
+        100%;
-        display: block;
+    background-size:
-        content: " ";
+        1.5rem 100%;
-        width: 10px;
+    background-repeat: no-repeat;
-        height: 10px;
+
-        background: red;
+    &:active, &:focus {
+        background-image:
+            linear-gradient(to right, $color__border, $color__border);
     }
 }