Update index.html

index.html

@@ -435,12 +435,12 @@ button:hover {
   border: 1px solid #ccc;
   border-radius: 5px;
   background-color: #fff;
-  /* Add your additional styling */
+  
 }
 
-/* Styling for the dropdown arrow */
+
 .select-custom::after {
-  content: '\25BC'; /* Unicode for down arrow */
+  content: '\25BC';
   position: absolute;
   top: 50%;
   right: 10px;
@@ -448,17 +448,40 @@ button:hover {
   pointer-events: none;
 }
 
-/* Styling for the dropdown list */
+
 .select-custom option {
   background-color: #fff;
   color: #333;
 }
 
-/* Hover effect on options */
+
 .select-custom option:hover {
   background-color: #f9f9f9;
 }
 
+.search-input {
+  width: 250px; 
+  height: 40px;
+  padding: 10px;
+  font-size: 16px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  background-color: #fff;
+  
+}
+
+
+.search-input::placeholder {
+  color: #999;
+}
+
+
+.search-input:focus {
+  outline: none;
+  border-color: #3498db; 
+  box-shadow: 0 0 5px rgba(52, 152, 219, 0.5); 
+}
+
       
     </style>
 </head>
@@ -504,10 +527,10 @@ button:hover {
           <div class="offcanvas-body">
             <div class="downloads">
         <div class="downloads-options">
-          <input type="text" id="search" placeholder="Search...">
+          <input type="text" id="search" placeholder="Search..." class="search-input">
           <div>
           <select id="sort" class="select-custom">
-            <option value="recent">Sort by Recent</option>
+            <option value="recent"> Sort by Recent </option>
             <option value="name">Sort by Name</option>
             <option value="artist">Sort by Artist</option>
           </select>