Minimal Material Design Form Input

Developer
Kyle Lavery
Size
3,076 Kb
Views
32,384
  1. Minimal Material Design Form Input Previews
  2. Minimal Material Design Form Input HTML Codes
  3. Minimal Material Design Form Input CSS Codes

How do I make an minimal material design form input?

Super easy and fully scalable Material Design form input. Change one variable to change the size of everything.. What is a minimal material design form input? How do you make a minimal material design form input? This script and codes were developed by Kyle Lavery on 26 August 2022, Friday.

Minimal Material Design Form Input Previews
IQ Test

Minimal Material Design Form Input - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Minimal Material Design Form Input </title> <link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="centered"> <div class="group"> <input type="text" id="name" required="required"/> <label for="name">Name</label> <div class="bar"></div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Minimal Material Design Form Input - Script Codes CSS Codes

* { box-sizing: border-box;
}
body { background: #333;
}
.centered { width: 550px; height: 110px; margin: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0;
}
.group { width: 100%; height: 110px; overflow: hidden; position: relative;
}
label { position: absolute; top: 36.66667px; color: rgba(255, 255, 255, 0.5); font: 400 36.66667px Roboto; cursor: text; transition: .25s ease;
}
input { display: block; width: 100%; padding-top: 36.66667px; border: none; border-radius: 0; color: white; background: #333; font-size: 36.66667px; transition: .3s ease;
}
input:valid ~ label { top: 0; font: 700 22px Roboto; color: rgba(255, 255, 255, 0.5);
}
input:focus { outline: none;
}
input:focus ~ label { top: 0; font: 700 22px Roboto; color: #2196f3;
}
input:focus ~ .bar:before { transform: translateX(0);
}
input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #333 inset; -webkit-text-fill-color: white !important;
}
.bar { background: rgba(255, 255, 255, 0.5); content: ''; width: 550px; height: 3.66667px; transition: .3s ease; position: relative;
}
.bar:before { content: ''; position: absolute; width: 100%; height: 150%; background: #2196f3; transform: translateX(-100%);
}
::selection { background: rgba(33, 150, 243, 0.3);
}
Minimal Material Design Form Input - Script Codes
Minimal Material Design Form Input - Script Codes
Home Page Home
Developer Kyle Lavery
Username koenigsegg1
Uploaded August 26, 2022
Rating 3.5
Size 3,076 Kb
Views 32,384
Do you need developer help for Minimal Material Design Form Input?

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!

Kyle Lavery (koenigsegg1) Script Codes
Name
Dominant Color Lazy Loading
Idea
Vintage Neon Sign
Favorite Animation
CSS Material Design Checkboxes
Fixed FAB with Slide-up Back to Top Button
Material Design Signup Interaction
Responsive Flex Layout With Tabs - Material Design
Black Hole 404 - Lost In Space
Social Share Button
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!