Implemented dropdown

nienananas · Jan 7, 2025 · c2a55c2 · c2a55c2
1 parent e4012ae
commit c2a55c2
Show file tree

Hide file tree

Showing 5 changed files with 400 additions and 291 deletions.
diff --git a/css/style.css b/css/style.css
@@ -100,7 +100,8 @@ dd {
 }
 
 #selectedEmergencyContactsField {
-    visibility: hidden;
+    /* Initialize the emergency contact field for the selected country to hidden */
+    display: none;
 }
 
 /* Styles for the country search */
@@ -116,18 +117,86 @@ dd {
 }
 
 /* Styles for the dropdown */
+.dropdownBox {
+    display: inline-block;
 
-.dropdown-box {
-    display: flex;;
-    width: 300px;
-    justify-content: center;
-    padding: 40px;
+    width: 100%;
+    position: relative;
+}
+
+.dropdownBox input {
+    border: 1px solid black;
+    width: 100%;
+    border-radius: 5px;
+    padding: 5px;
+}
+
+.dropdownBox .selectedItem {
+    position: relative;
+}
+
+.dropdownBox .selectedItem input {
+    cursor: pointer;
+    color: rgb(80, 80, 80);
 }
 
-.dropdown-box input {
-    border: black solid 1px;
-    outline: none;
+.dropdownBox .selectedItem::after {
+    content: "";
+    width: 5px;
+    height: 5px;
+    border: 4px solid;
+    border-color: transparent rgb(80, 80, 80) rgb(80, 80, 80) transparent;
+    position: absolute;
+    top: 70%;
+    right: 20px;
+    transform: translateY(-70%) rotate(45deg);
+}
+
+.dropdownBox.active .selectedItem::after {
+    transform: translateY(-40%) rotate(135deg);
+}
+
+.dropdownBox .dropdownContent {
+    box-shadow: 0 5px 15px black;
     border-radius: 5px;
+    max-height: 370px;
+    overflow-y: auto;
+    display: none;
+    position: absolute;
+    z-index: 99;
+    background-color: white;
+    width: 100%;
+}
+
+.dropdownBox.active .dropdownContent {
+    display: block;
+}
+
+.dropdownBox .dropdownContent .searchInput {
+    padding: 5px;
+    margin-bottom: 5px;
+}
+
+.dropdownBox .dropdownContent ul {
+    list-style: none;
+}
+
+.dropdownBox .dropdownContent ul li {
+    padding: 2px 5px;
+    cursor: pointer;
+}
+
+.dropdownBox .dropdownContent ul li.hidden {
+    display: none;
+}
+
+.dropdownBox .dropdownContent ul li:hover {
+    background-color: lightgray;
+}
+
+.selected {
+    background-color: #bed9f7;
+    color: midnightblue;
 }
 
 /* Responsive Design for tablets */