Update

Kaleb-Rupe · Aug 18, 2024 · 882c1af · 882c1af
1 parent 1f825c6
commit 882c1af
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/src/components/Footer/contact-form-page.js b/src/components/Footer/contact-form-page.js
@@ -147,7 +147,7 @@ const Form = () => {
             required: "Please select a service",
           })}
         >
-          <option value="">Select a service</option>
+          <option value="" className="select-service">Select a service</option>
           {services.map((service) => (
             <option key={service.id} value={service.title}>
               {service.title}

diff --git a/src/css/contact.css b/src/css/contact.css
@@ -195,14 +195,25 @@ button[type="submit"]:active,
   border-radius: 4px;
   transition: border-color 0.3s ease;
   appearance: none;
-  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
+  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
   background-repeat: no-repeat;
   background-position: right 0.7rem top 50%;
   background-size: 0.65rem auto;
+  color: gray;
 }
 
 .form-group select:focus {
   outline: none;
   border-color: var(--form-secondary-color);
-  box-shadow: var(--form-text-color);
+  box-shadow: 0 0 0 2px var(--form-secondary-color);
+}
+
+.form-group select option {
+  color: var(--form-text-color);
+  background-color: var(--form-background-color);
+}
+
+.select-service {
+    color: var(--form-text-color);
+    text-decoration: none;
 }