diff --git a/public/css/hop-styling.css b/public/css/hop-styling.css
index 68e556d53..c81dda28e 100644
--- a/public/css/hop-styling.css
+++ b/public/css/hop-styling.css
@@ -39,27 +39,36 @@ body input,
body select {
margin-top: 4px;
}
-body input {
+body input,
+body select {
border-radius: 8px;
border: 1px solid #8E9292;
padding: 16px;
font-size: 16px;
color: #000;
+ background-color: #fff;
}
-body input:focus, body input:focus-visible {
+body input:focus, body input:focus-visible,
+body select:focus,
+body select:focus-visible {
box-shadow: 0 0 0 2.5px #1574a1;
- border: none;
+ border: 1px solid transparent;
outline: none;
}
-body input:disabled, body input.disabled {
+body input:disabled, body input.disabled,
+body select:disabled,
+body select.disabled {
background-color: #f5f5f5;
filter: grayscale(100%);
}
-body input:disabled:hover, body input.disabled:hover {
+body input:disabled:hover, body input.disabled:hover,
+body select:disabled:hover,
+body select.disabled:hover {
box-shadow: 0 0 0 4px transparent;
border: 1px solid #8e9292;
}
-body input:hover {
+body input:hover,
+body select:hover {
border: 1px solid #8e9292;
box-shadow: 0 0 0 4px #9fcee6;
}
@@ -171,7 +180,7 @@ body .has-error select {
}
body .has-error input:focus,
body .has-error select:focus {
- border: 1px solid transparent;
+ box-shadow: 0 0 0 2.5px #fcbfbb;
}
body .has-error input:hover,
body .has-error select:hover {
diff --git a/public/scss/hop-styling.scss b/public/scss/hop-styling.scss
index ed8e8e14c..a71e4aa41 100644
--- a/public/scss/hop-styling.scss
+++ b/public/scss/hop-styling.scss
@@ -48,16 +48,18 @@ body {
margin-top: 4px;
}
- input {
+ input,
+ select {
border-radius: 8px;
border: 1px solid #8E9292;
padding: 16px;
font-size: 16px;
color: #000;
+ background-color: #fff;
&:focus,
&:focus-visible {
box-shadow: 0 0 0 2.5px #1574a1;
- border: none;
+ border: 1px solid transparent;
outline: none;
}
&:disabled,
@@ -191,7 +193,7 @@ body {
select {
border: 1px solid #d4281c;
&:focus {
- border: 1px solid transparent;
+ box-shadow: 0 0 0 2.5px #fcbfbb;
}
&:hover {
border: 1px solid #d4281c;
diff --git a/src/layouts/vehicle/vehicle.vue b/src/layouts/vehicle/vehicle.vue
index 46c6a5b61..1292983f1 100644
--- a/src/layouts/vehicle/vehicle.vue
+++ b/src/layouts/vehicle/vehicle.vue
@@ -17,7 +17,7 @@
cmsWidgetName="VehicleYearQuestion"
validationRules="year-required"
placeHolderText="Select year"
- inputId="yearQuestionField" />
+ customDropdownId="yearQuestionField" />
+ customDropdownId="makeQuestionField" />
+ customDropdownId="modelQuestionField" />
+ customDropdownId="styleQuestionField" />
{
if (isInIframe && notToPIAReturn) {
const newUrl = `${window.top.location.origin}${to.href}`;
window.top.location.href = newUrl;
- } else if (toQueryPage === fromQueryPage) {
+ // Refresh page if navigating to self to prevent locking.
+ // For now only carved out for vehicle; all modals are opened through anchor tags at the moment,
+ // which also self navigate, but relied on the page remaining the same on self-navigation.
+ } else if (toQueryPage === fromQueryPage && toQueryPage === "vehicle") {
router.go(0);
} else {
next();