Floating Form Field Labels

Developer
EricPorter
Size
4,010 Kb
Views
28,336
  1. Floating Form Field Labels Previews
  2. Floating Form Field Labels HTML Codes
  3. Floating Form Field Labels CSS Codes

How do I make an floating form field labels?

What is a floating form field labels? How do you make a floating form field labels? This script and codes were developed by EricPorter on 03 September 2022, Saturday.

Floating Form Field Labels Previews
IQ Test

Floating Form Field Labels - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Floating Form Field Labels</title>
<link href='https://fonts.googleapis.com/css?family=Julius+Sans+One' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body> <div class="form-wrap"> <div id="form"> <form id="register_form" action="null"> <fieldset id="personal-details"> <legend>Reach Out To Us</legend> <div class="input-container" id="first-name"> <input type="text" name="first-name" required/> <label for="first-name">First name</label> </div> <div class="input-container" id="last-name"> <input type="text" name="last-name" required/> <label for="last-name">Last name</label> </div> <div class="input-container" id="address"> <input type="text" name="address" required/> <label for="address">Address</label> </div> <div class="input-container" id="postal"> <input type="text" name="postal" required maxlength="6" /> <label for="postal">Postal Code</label> </div> <div class="input-container" id="city"> <input type="text" name="city" required/> <label for="city">City</label> </div> </fieldset> </form> </div> </div> </body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Floating Form Field Labels - Script Codes CSS Codes

body { font-family: "Julius Sans One", sans-serif; font-size: 1em; padding: 100px; background: #ddd;
}
.form-wrap { padding: 60px; background: #eee; border: 1px solid #ccc;
}
form { min-width: 320px; max-width: 700px; margin: auto; border: 1px solid #ccc; background: white; /* easeInOutQuart */ opacity: 0; -webkit-animation: fadeIn 2s cubic-bezier(0.165, 0.84, 0.44, 1) 0.175s 1 normal forwards; animation: fadeIn 2s cubic-bezier(0.165, 0.84, 0.44, 1) 0.175s 1 normal forwards;
}
form fieldset { display: block;
}
form fieldset .input-container:last-child { border-bottom-width: 0px;
}
form legend { letter-spacing: .1em; text-align: center; color: #777; border-bottom: 1px solid #ccc; width: 100%; height: 2em; line-height: 2em; font-size: 2em;
}
form .input-container { position: relative; height: 2.9em; border: 0px solid #ccc; border-bottom-width: 1px;
}
form #first-name, form #postal { float: left; box-sizing: border-box; display: inline-block; border-right-width: 1px;
}
form #last-name, form #city { float: right; box-sizing: border-box; display: inline-block;
}
form #last-name label, form #last-name input, form #city label, form #city input { padding: 1px 0.4em 1px 0.4em;
}
form #last-name + *, form #city + * { clear: both;
}
form #first-name, form #last-name { width: 50%;
}
form #postal { width: 25%; border-bottom: 0px;
}
form #city { width: 75%;
}
form input { display: block; position: absolute; box-sizing: border-box; width: 100%; border: 0; top: 0.7em; background: none; z-index: 1; padding: 1px; font-size: 1em; font-family: "Julius Sans One", sans-serif; letter-spacing: 0.012em; padding: .3em 0 0 .5em;
}
form label { font-family: "Julius Sans One", sans-serif; display: block; position: absolute; margin-top: 2px; padding: 1px; letter-spacing: 0.012em; color: #ACACAC; font-size: 1em; -webkit-animation-name: labelIn; animation-name: labelIn; -webkit-animation-duration: 0.35s; animation-duration: 0.35s; -webkit-animation-direction: reverse; animation-direction: reverse; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
}
form input:focus + label, form input:valid + label { -webkit-animation-name: labelOut; animation-name: labelOut; -webkit-animation-duration: 0.35s; animation-duration: 0.35s; -webkit-animation-direction: normal; animation-direction: normal; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
}
@-webkit-keyframes labelIn { 0% { left: 1px; opacity: 1; top: 0.7em; font-size: 1em; font-weight: 300; } 50% { font-size: 1em; left: 1em; opacity: 0; top: 0.7em; font-weight: 300; } 50.01% { font-size: 0.65em; left: 1em; opacity: 0; top: 0; color: #ccc; font-weight: 400; } 100% { font-size: 0.65em; opacity: 1; left: 1px; top: 0; color: #ccc; font-weight: 400; }
}
@keyframes labelIn { 0% { left: 1px; opacity: 1; top: 0.7em; font-size: 1em; font-weight: 300; } 50% { font-size: 1em; left: 1em; opacity: 0; top: 0.7em; font-weight: 300; } 50.01% { font-size: 0.65em; left: 1em; opacity: 0; top: 0; color: #ccc; font-weight: 400; } 100% { font-size: 0.65em; opacity: 1; left: 1px; top: 0; color: #ccc; font-weight: 400; }
}
@-webkit-keyframes labelOut { 0% { left: 1px; opacity: 1; top: 0.7em; font-size: 1em; font-weight: 300; } 50% { font-size: 1em; left: 1em; opacity: 0; top: 0.7em; font-weight: 300; } 50.01% { font-size: 0.65em; left: 1em; opacity: 0; top: 0; color: #ccc; font-weight: 400; } 100% { font-size: 0.65em; opacity: 1; left: 1px; top: 0; color: #ccc; font-weight: 400; }
}
@keyframes labelOut { 0% { left: 1px; opacity: 1; top: 0.7em; font-size: 1em; font-weight: 300; } 50% { font-size: 1em; left: 1em; opacity: 0; top: 0.7em; font-weight: 300; } 50.01% { font-size: 0.65em; left: 1em; opacity: 0; top: 0; color: #ccc; font-weight: 400; } 100% { font-size: 0.65em; opacity: 1; left: 1px; top: 0; color: #ccc; font-weight: 400; }
}
form *:focus { outline: 0;
}
@-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; }
}
Floating Form Field Labels - Script Codes
Floating Form Field Labels - Script Codes
Home Page Home
Developer EricPorter
Username EricPorter
Uploaded September 03, 2022
Rating 3
Size 4,010 Kb
Views 28,336
Do you need developer help for Floating Form Field Labels?

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!

EricPorter (EricPorter) Script Codes
Name
Jive Turkey - css animation
Add a Vignette to an image
Background animation - sliding divs
Webpage Hero header - scroll effects
Scroll Image Reveal effects
Mobile accordion dropdown nav - animation
Image Hover Effects
CSS Buttons Set
CSS Tabs
Flip Boxes
Create amazing marketing copy 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!