styling for selects and options

templates/standalone/inputs.lucius

@@ -11,11 +11,12 @@ form {
   grid-template-columns: 1fr 3fr;
   grid-gap: 5px;
   justify-content: flex-start;
-  align-items: baseline;
+  align-items: center;
+  padding: 4px;
   border-left: 2px solid transparent;
 
   + .form-group {
-    margin-top: 17px;
+    margin-top: 13px;
   }
 }
 
@@ -23,6 +24,22 @@ form {
   font-weight: 600;
 }
 
+.form-group--required {
+
+  .form-group__label::after {
+    content: ' *';
+    color: var(--color-error);
+  }
+}
+
+.form-group--has-error {
+  background-color: rgba(255, 0, 0, 0.1);
+
+  input, textarea {
+    border-color: var(--color-error) !important;
+  }
+}
+
 @media (max-width: 768px) {
   .form-group {
     grid-template-columns: 1fr;
@@ -63,33 +80,6 @@ input[type*="time"] {
   min-width: 240px;
 }
 
-.form-group--required {
-
-  .form-group__label::before {
-    content: '*';
-    position: absolute;
-    left: -14px;
-  }
-
-  input, textarea {
-    border-bottom-color: var(--color-primary);
-  }
-}
-
-.form-group--valid {
-
-  input, textarea {
-    border-bottom-color: var(--color-success);
-  }
-}
-
-.form-group--has-error {
-
-  input, textarea {
-    border-bottom-color: var(--color-error);
-  }
-}
-
 input[type="text"]:focus,
 input[type="password"]:focus,
 input[type="url"]:focus,
@@ -128,6 +118,20 @@ textarea:focus {
   outline: 0;
 }
 
+/* OPTIONS */
+select,
+option {
+  font-size: 1rem;
+  line-height: 1.5;
+  padding: 4px 13px;
+  border: 1px solid #dbdbdb;
+  border-radius: 2px;
+  outline: 0;
+  color: #363636;
+  background-color: #f3f3f3;
+  box-shadow: inset 0 1px 2px 1px rgba(50,50,50,.05);
+}
+
 /* CUSTOM LEGACY CHECKBOX AND RADIO BOXES */
 input[type="checkbox"] {
   position: relative;