clear on focus

pages/index.js

@@ -38,15 +38,16 @@ export default function Home() {
             {Math.round(weatherData.main.temp)}°
           </h1>
           <p>Feels like {weatherData.main.feels_like}°</p>
-          <input
-            className={styles.search}
-            defaultValue="Search city"
-            type="text"
-            onChange={(e) => setInput(e.target.value)}
-          />
-          <button onClick={clickHandler}>Send</button>
         </>
       )}
+      <input
+        className={styles.search}
+        defaultValue="Search city"
+        type="text"
+        onFocus={(e) => (e.target.value = "")}
+        onChange={(e) => setInput(e.target.value)}
+      />
+      <button onClick={clickHandler}>Search</button>
     </div>
   );
 }

styles/Home.module.css

@@ -12,10 +12,12 @@
 
 .search {
   margin-top: 300px;
-  height: 30px;
+  height: 40px;
-  width: 200px;
+  width: 300px;
-  border-radius: 10px;
+  border-radius: 5px;
-  border: none;
+  border: 1px solid rgb(209, 209, 252);
+
   color: rgb(224, 237, 241);
   padding: 0 10px;
+  color: grey;
 }