Material Design Input Placeholder

Developer
Elmer Balbin
Size
1,925 Kb
Views
6,072
  1. Material Design Input Placeholder Previews
  2. Material Design Input Placeholder HTML Codes
  3. Material Design Input Placeholder CSS Codes

How do I make an material design input placeholder?

What is a material design input placeholder? How do you make a material design input placeholder? This script and codes were developed by Elmer Balbin on 22 January 2023, Sunday.

Material Design Input Placeholder Previews
IQ Test

Material Design Input Placeholder - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Material Design Input Placeholder</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="wrapper"> <form> <input class="field" placeholder="Username" type="text" required=""> <input class="field" placeholder="Password" type="password" required=""> <input class="submit" type="submit" value="Login"> </form>
</div>
</body>
</html>

Material Design Input Placeholder - Script Codes CSS Codes

#wrapper { width: 100%; max-width: 300px; height: 200px; box-sizing: border-box; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;
}
.field { margin: 25px auto; width: 200px; display: block; border: none; padding: 10px 0; border-bottom: solid 1px #1abc9c; transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1); background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #1abc9c 4%); background-position: -200px 0; background-size: 200px 100%; background-repeat: no-repeat; color: #0e6252;
}
.field::-webkit-input-placeholder { transition: all 0.3s ease-in-out;
}
.field:focus { box-shadow: none; outline: none; background-position: 0 0;
}
.field:focus::-webkit-input-placeholder { color: #1abc9c; font-size: 11px; transform: translateY(-20px); visibility: visible !important;
}
.submit { display: block; margin: 25px auto; box-sizing: border-box; padding: 10px 30px; background-color: #1abc9c; border: 1px solid #1abc9c; color: #FFF; border-radius: 3px; font-size: 14px; cursor: pointer; transition: all 0.3s ease-in-out;
}
.submit:hover { background-color: #FFF; color: #1abc9c;
}
Material Design Input Placeholder - Script Codes
Material Design Input Placeholder - Script Codes
Home Page Home
Developer Elmer Balbin
Username elmzarnsi
Uploaded January 22, 2023
Rating 3
Size 1,925 Kb
Views 6,072
Do you need developer help for Material Design Input Placeholder?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Elmer Balbin (elmzarnsi) Script Codes
Name
Some button hover effects
Collapsed div borders using CSS3 box-shadow
Self-Caricature SVG Animation
Direction Aware Tiles using clip-path Pure CSS
Material Design Card Flip - Direction Aware
Simple hover color slide effect
My Profile CSS
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!