Merge pull request #138 from zalabhavy/input

Input field style added
Avdhesh-Varshney · Jun 21, 2024 · b797bb7 · b797bb7
2 parents f8f613a + 8077f8f
commit b797bb7
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 5 deletions.
diff --git a/src/App.css b/src/App.css
@@ -70,3 +70,22 @@ input[type=number]::-webkit-outer-spin-button {
   transform: scale(1.05);
   box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
 }
+.autocomplete-container .MuiOutlinedInput-root {
+  border-radius: 8px;
+  border-color: white;
+  color: white;
+  transition: border-color 0.3s ease, color 0.3s ease;
+}
+.autocomplete-container .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
+  border-color: white; 
+}
+.autocomplete-container .MuiInputLabel-root {
+  color: white;
+  transition: color 0.3s ease;
+}
+.autocomplete-container .MuiInputLabel-root.Mui-focused {
+  color: white; 
+}
+.autocomplete-container .MuiOutlinedInput-input {
+  color: white; 
+}
diff --git a/src/App.jsx b/src/App.jsx
@@ -88,14 +88,20 @@ function App() {
           <label htmlFor="inputNumber" className="col-form-label">Episode Number</label>
         </div>
 
-        <div className="col-auto">
-          <Autocomplete
+        <div className="col-auto autocomplete-container">
+         <Autocomplete
             disablePortal
-            className="bg-white"
             options={options}
             sx={{ width: 300 }}
-            renderInput={(params) => <TextField onSelect={handleOnChange} onChange={handleOnChange} {...params} label="Input Ep.1 to 806 (Finale)" />}
-          />
+            renderInput={(params) => (
+         <TextField
+             onSelect={handleOnChange}
+            onChange={handleOnChange}
+             {...params}
+            label="Input Ep.1 to 806 (Finale)"
+              />
+            )}
+            />
         </div>
 
         <div className="col-auto">