Material Design Textbox Using HTML, CSS and JavaScript

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 byCoding Pakistan
Languages HTML / CSS / JS
Source CodeAvailable Below
PreviewTake 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.

  1. The first step is to create one folder.
  2. Open this folder in Vs Code Editor and create three files in HTML, CSS, and JavaScript.
  3. Make sure the HTML file extension is (.html), the CSS file extension is (.css) and the JavaScript file extension is (.js)
  4. 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”>)
  5. The last step is copying and pasting the given code into your files.


TextBox Using HTML and CSSSource Code


<!DOCTYPE html>
<html lang="en">
    <!-- Created by -->
    <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" />
    <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>
    <script type="text/javascript" src="script.js"></script>


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) => {

Related Content

  1. How to Create Fading Tabs Using HTML, CSS, and JavaScript
  2. Profile Card Using HTML and CSS – Part 01
  3. How to Create Drop-Down Menu Using HTML and CSS – Part 01

Leave a Comment