Material Design Form

Developer
Woodrow Barlow
Size
6,996 Kb
Views
36,432
  1. Material Design Form Previews
  2. Material Design Form HTML Codes
  3. Material Design Form CSS Codes

How do I make an material design form?

Apparently material design is the cool thing these days. I figure I should at least read up on it and give it a stab. Here's my CSS-only attempt. It's responsive to width.. What is a material design form? How do you make a material design form? This script and codes were developed by Woodrow Barlow on 31 July 2022, Sunday.

Material Design Form Previews
IQ Test

Material Design Form - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Material Design Form</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600'>
<link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Raleway'>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header> <nav> <ul id="breadcrumbs"> <li><a href="#">Home</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Email</a></li> </ul> <input type="checkbox" id="dropdown_button"> <label for="dropdown_button">Display Dropdown</label> <ul id="dropdown"> <li><a href="#">About Us</a></li> <li><a href="#">Products</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <h1>Contact the Team</h1>
</header>
<section> <h2>We'd Love to Hear From You</h2> <p>Do you have any lingering questions or comments? Fill out this brief form, and we'll get back to you within a business day. If you need a quicker reply, consider beginning a free trial of our <a href="#">consulting service</a>.</p> <form> <span class="legend">Tell us about yourself.</span> <div class="flexparent"> <div> <input type="text" name="name" id="name" required> <label for="text">Your Name</label> </div> <div> <input type="text" name="email" id="email" required> <label for="text">Your Email</label> </div> </div> <div class="flexparent"> <div> <span class="legend">To what do we owe the pleasure?</span> <input type="radio" name="reason" id="reason_inquiry" value="inquiry"> <label for="reason_inquiry">Products or Services Inquiry</label> <br> <input type="radio" name="reason" id="reason_support" value="support"> <label for="reason_support">Technical Questions</label> <br> <input type="radio" name="reason" id="reason_other" value="other"> <label for="reason_other">Other Reasons</label> </div> <div> <span class="legend">How should we get in touch?</span> <input type="checkbox" name="contact" id="contact_phone" value="phone"> <label for="contact_phone">Telephone</label> <br> <input type="checkbox" name="contact" id="contact_email" value="email"> <label for="contact_email">Email</label> <br> <input type="checkbox" name="contact" id="contact_person" value="person"> <label for="contact_person">In-Person</label> </div> </div> <span class="legend">How happy are you today?</span> <div class="flexparent"> <div> <input type="range" name="oranges" min="0" max="12" step="1" value="4"> </div> </div> <span class="legend">Now, what's on your mind?</span> <textarea></textarea> <div class="submission"> <input type="reset" value="Start Over"> <input type="submit" value="Submit"> </div> </form>
</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Material Design Form - Script Codes CSS Codes

* { box-sizing: border-box;
}
body { background-color: #ccc; font-family: "Open Sans", Arial, sans-serif; font-size: 15px; font-weight: 300; color: #444;
}
h1, h2, h3 { font-family: "Raleway", Arial, sans-serif;
}
h1 { color: #fff; font-size: 35px;
}
h2 { font-size: 22px; margin-bottom: 20px;
}
h3 { font-size: 18px; margin-bottom: 20px;
}
header { position: relative; height: 200px; margin-bottom: -75px; background-color: #3498db; padding: 60px 20px 0 20px; color: #fff;
}
header a { color: #fff; text-decoration: none;
}
header a:hover { text-decoration: underline;
}
header nav { position: absolute; top: 0; left: 0; width: 100%; height: 35px; background-color: #2980b9;
}
header #breadcrumbs li { display: inline; font-size: 18px; line-height: 35px; margin-left: 10px;
}
header #breadcrumbs li:first-of-type { margin-left: 20px;
}
header #breadcrumbs li:not(:first-of-type)::before { content: '>'; padding-right: 10px;
}
header #dropdown_button { display: none;
}
header label[for="dropdown_button"] { font-size: 0; display: block; position: absolute; top: 0; right: 0; width: 35px; height: 35px; cursor: pointer; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAQAAAC00HvSAAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfeDAkBEyl+h8a9AAAADGlUWHRDb21tZW50AAAAAAC8rrKZAAAALUlEQVRIx2NgGAUjCjAimP//k6wZrpuJOq5hGo2Q0eQ3mvxGwWjyGwWjgEgAAK1nBhDSfijYAAAAAElFTkSuQmCC");
}
header #dropdown_button:checked ~ #dropdown { height: 140px;
}
header #dropdown_button:checked + label { background-color: #20638f;
}
header #dropdown { position: absolute; top: 35px; right: 0; width: 200px; height: 0; overflow: hidden; background: #2980b9; z-index: +1; -webkit-transition: height 0.5s ease; transition: height 0.5s ease; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
}
header #dropdown li a { display: block; height: 35px; line-height: 35px; padding: 0 10px;
}
header #dropdown li a:hover { text-decoration: none; background: #20638f;
}
section { position: relative; background-color: #fff; width: 70%; min-width: 700px; margin: 0 auto 50px auto; padding: 35px 50px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
}
section p { margin-bottom: 10px; text-align: justify; line-height: 18px;
}
section a { color: #2980b9;
}
section a:hover { color: #3498db; text-decoration: none;
}
.legend { display: block; margin-top: 20px; font-weight: bold;
}
.flexparent > div > .legend { margin-top: 0; margin-left: -10px; margin-bottom: 10px;
}
.flexparent { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
}
.flexparent > div { position: relative; display: inline; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; padding: 10px; width: 30%;
}
.submission { text-align: right; margin-top: 10px;
}
section input[type="text"] { outline: none !important; width: 100%; border: none; border-bottom: 1px solid #444; margin-top: 10px; -webkit-transition: border 0.5s ease; transition: border 0.5s ease;
}
section input[type="text"] + label { position: absolute; top: 20px; left: 10px; pointer-events: none; -webkit-transition: top 0.5s ease, font-size 0.5s ease, color 0.5s ease; transition: top 0.5s ease, font-size 0.5s ease, color 0.5s ease;
}
section input[type="text"]:focus { border-bottom: 2px solid #1abc9c;
}
section input[type="text"]:focus + label { top: 8px; font-size: 10px; color: #107360;
}
section input[type="text"]:valid + label { top: 8px; font-size: 10px;
}
section input[type="radio"], section input[type="checkbox"] { display: none;
}
section input[type="radio"] + label::before { content: ''; display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid #444; margin-right: 10px; margin-top: 5px; background-color: #1abc9c; box-shadow: 0 0 0 8px #fff inset; -webkit-transition: box-shadow 0.5s ease; transition: box-shadow 0.5s ease;
}
section input[type="radio"]:checked + label::before { box-shadow: 0 0 0 2px #fff inset;
}
section input[type="checkbox"] + label::before { content: ''; display: inline-block; width: 12px; height: 12px; border-radius: 20%; border: 1px solid #444; margin-right: 10px; margin-top: 5px; background-color: #1abc9c; box-shadow: 0 0 0 8px #fff inset; -webkit-transition: box-shadow 0.5s ease; transition: box-shadow 0.5s ease;
}
section input[type="checkbox"]:checked + label::before { box-shadow: 0 0 0 1px #fff inset;
}
section input[type="checkbox"]:checked + label::after { position: absolute; left: 11px; color: #fff; content: '\f00c'; font-family: "FontAwesome"; font-size: 15px; line-height: 12px; margin-top: 6px;
}
section input[type="radio"] + label:hover, section input[type="radio"] + label:focus, section input[type="radio"] + label:active, section input[type="checkbox"] + label:hover, section input[type="checkbox"] + label:focus, section input[type="checkbox"] + label:active { color: #16a085;
}
section input[type="radio"] + label:hover::before, section input[type="radio"] + label:focus::before, section input[type="radio"] + label:active::before, section input[type="checkbox"] + label:hover::before, section input[type="checkbox"] + label:focus::before, section input[type="checkbox"] + label:active::before { border: 1px solid #16a085;
}
section textarea { width: 100%; height: 100px; margin-top: 10px; border: none; border: 1px solid rgba(0, 0, 0, 0.2); outline: none !important; -webkit-transition: border 0.5s ease; transition: border 0.5s ease;
}
section textarea:focus { border: 1px solid rgba(0, 0, 0, 0.2); border-bottom: 2px solid #1abc9c;
}
section input[type="reset"], section input[type="submit"] { outline: none !important; background: #ccc; border: none; height: 35px; width: 100px; margin-left: 20px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 0 0 20px #fff inset; -webkit-transition: box-shadow 0.5s ease; transition: box-shadow 0.5s ease;
}
section input[type="reset"]:active, section input[type="submit"]:active { box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); border-bottom: 2px solid #1abc9c;
}
section input[type="range"] { width: 100%; -webkit-appearance: none; outline: none !important; overflow: hidden;
}
section input[type="range"]::-webkit-slider-runnable-track { height: 12px; border: none; background: -webkit-linear-gradient(top, transparent 5px, #ccc 5px, #ccc 7px, transparent 7px); background: linear-gradient(to bottom, transparent 5px, #ccc 5px, #ccc 7px, transparent 7px);
}
section input[type="range"]::-moz-range-track { height: 12px; border: none; background: linear-gradient(to bottom, transparent 5px, #ccc 5px, #ccc 7px, transparent 7px);
}
section input[type="range"]::-ms-track { height: 12px; border: none; background: linear-gradient(to bottom, transparent 5px, #ccc 5px, #ccc 7px, transparent 7px);
}
section input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; z-index: +2; width: 10px; height: 10px; margin: 1px; border-radius: 50%; border: none; background: #1abc9c;
}
section input[type="range"]::-moz-range-thumb { z-index: +2; width: 10px; height: 10px; border-radius: 50%; border: none; background: #1abc9c;
}
section input[type="range"]::-ms-thumb { z-index: +2; width: 10px; height: 10px; border-radius: 50%; border: none; background: #1abc9c;
}
section input[type="range"]::-ms-fill-lower { height: 12px; background: linear-gradient(to bottom, transparent 5px, #1abc9c 5px, #1abc9c 7px, transparent 7px);
}
section input[type="range"]:hover::-webkit-slider-runnable-track, section input[type="range"]:active::-webkit-slider-runnable-track, section input[type="range"]:focus::-webkit-slider-runnable-track { background: -webkit-linear-gradient(top, transparent 5px, #aaa 5px, #aaa 7px, transparent 7px); background: linear-gradient(to bottom, transparent 5px, #aaa 5px, #aaa 7px, transparent 7px);
}
section input[type="range"]:hover::-moz-range-track, section input[type="range"]:active::-moz-range-track, section input[type="range"]:focus::-moz-range-track { background: linear-gradient(to bottom, transparent 5px, #aaa 5px, #aaa 7px, transparent 7px);
}
section input[type="range"]:hover::-ms-track, section input[type="range"]:active::-ms-track, section input[type="range"]:focus::-ms-track { background: linear-gradient(to bottom, transparent 5px, #aaa 5px, #aaa 7px, transparent 7px);
}
section input[type="range"]:hover::-webkit-slider-thumb, section input[type="range"]:active::-webkit-slider-thumb, section input[type="range"]:focus::-webkit-slider-thumb { width: 12px; height: 12px; margin: 0;
}
section input[type="range"]:hover::-moz-range-thumb, section input[type="range"]:active::-moz-range-thumb, section input[type="range"]:focus::-moz-range-thumb { width: 12px; height: 12px; margin: 0;
}
section input[type="range"]:hover::-ms-thumb, section input[type="range"]:active::-ms-thumb, section input[type="range"]:focus::-ms-thumb { width: 12px; height: 12px; margin: 0;
}
@media (max-width: 700px) { body { background: #fff; } section { width: 100%; min-width: 400px; box-shadow: none; }
}
@media (max-width: 600px) { section { padding: 35px 20px; }
}
@media (max-width: 400px) { header { padding: 45px 10px; height: 160px; } header h1 { font-size: 25px; } section p { display: none; } .flexparent { display: block; } .flexparent > div { display: block; width: 100%; }
}
Material Design Form - Script Codes
Material Design Form - Script Codes
Home Page Home
Developer Woodrow Barlow
Username wbarlow
Uploaded July 31, 2022
Rating 4.5
Size 6,996 Kb
Views 36,432
Do you need developer help for Material Design Form?

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!

Woodrow Barlow (wbarlow) Script Codes
Name
Fedora 20 Login
Card Stack Loading Animation
Input Range with Backfill
Gnome 3 Web
CSS-Only 12-digit UPC-A Barcode Generator
Responsive Menu App
Ahemmeter.github.io
Github Octocat SVG
Summer Day
Frontpage
Create amazing sales emails 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!