diff --git a/src/common-components/dropdown-question/dropdown-question.vue b/src/common-components/dropdown-question/dropdown-question.vue
index a940e1df8..e05341469 100644
--- a/src/common-components/dropdown-question/dropdown-question.vue
+++ b/src/common-components/dropdown-question/dropdown-question.vue
@@ -1,7 +1,7 @@
 <template>
     <div
         class="dropdown-question"
-        :class="(errors && errors.length) || hasError ? 'has-error' : ''">
+        :class="errorMessage || hasError ? 'has-error' : ''">
         <label
             :for="inputId"
             :aria-label="questionText"
@@ -43,6 +43,7 @@ export default {
         disableAutoFill: Boolean,
         validationRules: String,
         cmsWidgetName: String,
+        hasError: Boolean,
     },
     setup(props) {
         const propsClone = Object.assign({}, props);
diff --git a/src/styles/common-error-styles.scss b/src/styles/common-error-styles.scss
index d497ae6ce..a5a759871 100644
--- a/src/styles/common-error-styles.scss
+++ b/src/styles/common-error-styles.scss
@@ -75,23 +75,21 @@ html {
         }
         &.textbox-question,
         &.dropdown-question {
-            input:hover {
-                box-shadow: 0px 0px 0px 4px $red-200;
-                border-radius: 0.5rem;
-                border: 1px solid $red;
-            }
-            input:focus {
-                box-shadow: 0 0 0 2.5px $red;
-            }
             p {
                 color: $red;
             }
             input,
             select {
-                border: 1px solid transparent;
-                box-shadow: 0 0 0 1px $red;
+                border: 1px solid $red;
                 &:focus {
                     border: 1px solid transparent;
+                    box-shadow: 0 0 0 2.5px $red;
+                }
+
+                &:hover {
+                    box-shadow: 0px 0px 0px 4px $red-200;
+                    border-radius: 0.5rem;
+                    border: 1px solid $red;
                 }
             }
             select {