feat: added keyboard accessibility

1 files changed, 43 insertions, 6 deletions

diff --git a/client/src/components/CustomSelect/CustomSelect.module.css b/client/src/components/CustomSelect/CustomSelect.module.css
index 4b5f1a4..f62a77f 100644
--- a/client/src/components/CustomSelect/CustomSelect.module.css
+++ b/client/src/components/CustomSelect/CustomSelect.module.css
@@ -10,39 +10,76 @@
 
 .selected__option {
   cursor: pointer;
+  font-weight: 500;
   padding: 10px;
   border: none;
   display: flex;
   justify-content: space-between;
 }
 
-.options {
+.options__container {
   position: absolute;
+  display: flex;
+  flex-direction: column;
+  padding: 0.5rem 0;
   top: 140%;
   left: 0;
-  height: 400px;
-  overflow-y: auto;
   width: 100%;
+  height: 400px;
   border: none;
   border-radius: 10px;
   background-color: var(--color-yellow);
   z-index: 2;
+  align-items: center;
+}
+
+.options__search {
+  margin-top: 0.5rem;
+  padding: 6px;
+  width: 85%;
+  border: none;
+  border-radius: 6px;
+  background-color: #d79921;
+  color: var(--color-dark);
+  &:focus {
+    outline: none;
+  }
+  &::placeholder {
+    color: #504945;
+    opacity: 1;
+  }
+
+  &::-ms-input-placeholder {
+    color: #504945;
+  }
+}
+
+.options {
+  width: 100%;
+  height: 400px;
+  overflow-y: auto;
+  margin-top: 10px;
 }
 
 .option {
   padding: 10px;
   color: var(--color-dark);
-  border-bottom: var(--color-dark) 1px solid;
+  border-bottom: 1px solid var(--color-dark);
   cursor: pointer;
-  transition: all 0.3s ease;
+  transition: transform 0.3s ease;
   &:hover {
-    scale: 0.9;
+    transform: scale(0.9);
   }
   &:last-child {
     border-bottom: none;
   }
 }
 
+.option.focused {
+  background-color: #d79921;
+  outline: none;
+}
+
 @media screen and (max-width: 480px) {
   .select {
     width: 8rem;