Hi guys I am back with another fantastic project in this project I created a Material Design Textbox Using HTML, CSS & JavaScript.
I also share a complete source code with my readers and followers it is free of cost, not any subscription to get the source code of this project. You can download these code files and use them for free.
Material Design
Material Design is a design language created by Google in 2014. It is a comprehensive guide for visual, motion, and interaction design across platforms and devices.
The physical world and its textures inspire Material Design, including how they reflect light and cast shadows. Material surfaces reimagine the mediums of paper and ink.
Many popular apps and websites, including Google Search, Gmail, and YouTube use Material Design. It is also used by many third-party developers who create apps for Android and iOS.
In this project, I created a one-text box with the placeholder “Your Name” When you click on the input field it produces a smooth transaction to move “Your Name” to the top as shown in the image below.
About This Project
This project was created by the codingpakistan team to help students learn coding and programming in a simple way. If you want to join our team please follow us on Instagram.
| Created by | Coding Pakistan |
| Languages | HTML / CSS / JS |
| Source Code | Available Below |
| Preview | Take Preview |
How to Create a Material Design TextBox
There are some steps to create this type of TextBox using HTML, CSS, and JavaScript that are given below.
- The first step is to create one folder.
- Open this folder in Vs Code Editor and create three files in HTML, CSS, and JavaScript.
- Make sure the HTML file extension is (.html), the CSS file extension is (.css) and the JavaScript file extension is (.js)
- After creating files, you link a CSS file with an HTML file with the help of this line code. (<link rel=”stylesheet” href=”style.css”>)
- The last step is copying and pasting the given code into your files.
Video
TextBox Using HTML and CSS – Source Code
HTML FILE
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Created by www.codingpakistan.com -->
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Material Textbox - Coding Pakistan </title>
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"
/>
</head>
<body>
<div class="md-textbox">
<input oninput="handleChange(event)" id="input" type="text" />
<span class="material-symbols-outlined">account_circle</span>
<label htmlFor="input">Your Name</label>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
CSS FILE
body {
margin: 0;
height: 100vh;
display: grid;
place-items: center;
background: #151515;
}
.md-textbox {
position: relative;
font-family: "Euclid Circular A";
}
.md-textbox :is(label, span) {
position: absolute;
top: 50%;
translate: 0 -50%;
pointer-events: none;
color: #888888;
transition: 0.3s;
}
.md-textbox > label {
left: 10px;
translate: 0 -50%;
padding: 4px 8px;
}
.md-textbox > span {
right: 16px;
font-size: 28px;
}
.md-textbox > input {
height: 56px;
width: 220px;
padding-left: 16px;
border: 2px solid #888888;
border-radius: 8px;
outline: none;
background: transparent;
color: #f9f9f9;
font-family: inherit;
font-size: 16px;
}
.md-textbox > :is(input:focus, .has-value) {
border-color: #8f44fd;
}
.md-textbox > :is(input:focus, .has-value) ~ span {
color: #f9f9f9;
}
.md-textbox > :is(input:focus, .has-value) ~ label {
background: #151515;
color: rgba(255, 255, 255, 0.75);
translate: 0 -46px;
}
JavaScript FILE
const input = document.querySelector("#input");
const handleChange = (event) => {
input.classList.toggle("has-value", event.target.value);
};
