Update

Author: qasim-wpbrigade

customSelect.js

@@ -80,4 +80,4 @@ const generateSelect = (target) => {
 
 document.addEventListener('DOMContentLoaded', () => {
    generateSelect('select');
-})
+})

customSelect.min.js

@@ -22,7 +22,8 @@ body{
     background-color: #ffffff;
 }
 
-.select > .label{
+.select > .label,
+.select > select{
     padding: 10px 10px;
     border: 2px solid rgb(216, 216, 216);
     text-transform: capitalize;
@@ -31,7 +32,7 @@ body{
     width: 100%;
     border-radius: 5px;
     background-color: #f7f7f7;
-    transition: 0.3s all;
+    transition: 0.5s all cubic-bezier(0.77, 0, 0.175, 1);
 }
 
 .select > .options{
@@ -40,29 +41,33 @@ body{
     padding: 0;
     margin: 0;
     border: 2px solid rgb(216, 216, 216);
-    display: none;
     position: absolute;
     top: calc(100% + 2px);
     z-index: 1;
     background-color: #f7f7f7;
     border-radius: 5px;
     overflow: hidden;
-    max-height: 300px;
     overflow: auto;
+    max-height: 0;
+    transition: 0.5s all cubic-bezier(0.77, 0, 0.175, 1);
+    opacity: 0;
+    visibility: hidden;
 }
 
 .select.active > .options{
-    display: block;
+    max-height: 300px;
+    opacity: 1;
+    visibility: visible;
 }
 
 .select > .options > li{
     padding: 7px 10px;
     text-transform: capitalize;
     cursor: pointer;
-    transition: 0.3s all;
+    transition: 0.5s all cubic-bezier(0.77, 0, 0.175, 1);
 }
 
 .select > .options > li:hover,
 .select > .options > li.current{
     background: rgb(219, 219, 219);
-}
+}

index.css

@@ -13,19 +13,19 @@
         <option value="option1">option1</option>
         <option value="option2">option2</option>
         <option value="option3">option3</option>
-        <option value="option4">option4</option>
+        <option selected value="option4">option4</option>
         <option value="option5">option5</option>
         <option value="option6">option6</option>
         <option value="option7">option7</option>
         <option value="option8">option8</option>
-        <option selected value="option9">option9</option>
+        <option value="option9">option9</option>
         <option value="option10">option10</option>
         <option value="option11">option11</option>
         <option value="option12">option12</option>
         <option value="option13">option13</option>
         <option value="option14">option14</option>
     </select>
 
-    <script src="customSelect.js"></script>
+    <script src="index.js"></script>
 </body>
-</html>
+</html>