Merge pull request #903 from OAAK125/input-field

aayush105 · web-flow · commit 9020f6e17a49 · 2025-10-24T13:11:28.000+05:45
adding input-text field
diff --git a/Input Field/index.html b/Input Field/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Floating Label Input</title>
+    <link rel="stylesheet" href="style.css" />
+</head>
+
+<body>
+
+    <div class="input-container">
+        <input type="text" id="input" required />
+        <label for="input" class="label">Enter Text</label>
+        <div class="underline"></div>
+    </div>
+
+</body>
+
+</html>
diff --git a/Input Field/style.css b/Input Field/style.css
@@ -0,0 +1,62 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #f4f7fb;
+  font-family: "Poppins", sans-serif;
+}
+
+.input-container {
+  position: relative;
+  width: 250px;
+}
+
+.input-container input[type="text"] {
+  font-size: 1rem;
+  width: 100%;
+  border: none;
+  border-bottom: 2px solid #b0bec5;
+  padding: 8px 0;
+  background-color: transparent;
+  outline: none;
+  color: #222;
+}
+
+.input-container .label {
+  position: absolute;
+  top: 0;
+  left: 0;
+  color: #78909c;
+  transition: all 0.3s ease;
+  pointer-events: none;
+}
+
+.input-container input[type="text"]:focus ~ .label,
+.input-container input[type="text"]:valid ~ .label {
+  top: -20px;
+  font-size: 0.85rem;
+  color: #1565c0; /* highlight color */
+}
+
+.input-container .underline {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 2px;
+  width: 100%;
+  background-color: #1565c0;
+  transform: scaleX(0);
+  transition: transform 0.3s ease;
+  transform-origin: left;
+}
+
+.input-container input[type="text"]:focus ~ .underline,
+.input-container input[type="text"]:valid ~ .underline {
+  transform: scaleX(1);
+}
diff --git a/README.md b/README.md
@@ -70,6 +70,7 @@ Please be aware that the demos may exhibit significant accessibility issues, suc
 - [Image Comparison Slider](#image-comparison-slider)
 - [Infinite Carousel](#infinite-carousel)
 - [Info on Hover / Popover](#info-on-hover-popover)
+- [Input Text Field](#input-text)
 - [Interactive Resume](#interactive-resume)
 - [Jumping Ball](#jumping-ball)
 - [Light Bulb Animation](#light-bulb-animation)
@@ -1317,6 +1318,18 @@ An interactive resume built entirely using **HTML and CSS** — featuring animat
 
 [<img src="images/rotating_text.mp4" height="230" title="Demo">]()
 
+## <a id="input-text"></a>Input Text Field
+
+[<video height="230" width="230" controls> 
+<source src="images/input-text.mp4" type="video/mp4">
+</video>
+]()
+
+**[⬆ back to top](#quick-links)**
+
+---
+
+
 **[⬆ back to top](#quick-links)**
 
 ## Contributors
diff --git a/images/input-text.mp4 b/images/input-text.mp4
