Floating Labels

Developer
John Heiner
Size
3,880 Kb
Views
8,096
  1. Floating Labels Previews
  2. Floating Labels HTML Codes
  3. Floating Labels CSS Codes
  4. Floating Labels JS Codes

How do I make an floating labels?

Small experiment with floating labels and animation. What is a floating labels? How do you make a floating labels? This script and codes were developed by John Heiner on 14 November 2022, Monday.

Floating Labels Previews
IQ Test

Floating Labels - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Floating Labels</title> <meta name="viewport" id="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0,minimal-ui" /> <link rel="stylesheet" href="css/style.css">
</head>
<body> <form>	<fieldset>	<legend>	Your Details	</legend>	<div class="form-row">	<div class="form-control">	<div class="float-label">	<input placeholder="First Name" type="text" id="first-name" value="John">	<label for="first-name">First Name</label>	</div>	</div>	<div class="form-control">	<div class="float-label">	<input placeholder="Last Name" type="text" id="last-name">	<label for="last-name">Last Name</label>	</div>	</div>	</div>	<div class="form-row">	<div class="form-control">	<div class="float-label">	<input placeholder="Street Address" type="text" id="street-address">	<label for="street-address">Street Address</label>	</div>	</div>	<div class="form-control">	<div class="float-label">	<input placeholder="City" type="text" id="city">	<label for="city">City</label>	</div>	</div>	</div>	<div class="form-row">	<div class="form-control">	<div class="float-label">	<input placeholder="State" type="text" id="state">	<label for="state">State</label>	</div>	</div>	<div class="form-control">	<div class="float-label">	<input placeholder="Postal Code" type="text" id="zip">	<label for="zip">Postal Code</label>	</div>	</div>	</div>	</fieldset>	<fieldset>	<legend>	Credit Card Details	</legend>	<div class="form-row">	<div class="form-control">	<div class="float-label">	<input placeholder="Credit Card Number" type="text" id="cc-num">	<label for="cc-num">Credit Card Number</label>	</div>	</div>	<div class="form-control">	<div class="float-label">	<input placeholder="CVV" type="text" id="cvv">	<label for="cvv">CVV</label>	</div>	</div>	</div>	</fieldset>
</form> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Floating Labels - Script Codes CSS Codes

*, *:before, *:after { box-sizing: border-box;
}
html,
body { font-family: "proxima-nova", "proxima nova", "helvetica neue", "helvetica", "arial", sans-serif; -webkit-font-smoothing: antialiased; margin: 0; padding: 20px 10px;
}
@media (min-width: 480px) { html, body { padding: 30px 20px; }
}
fieldset { border: 0; margin: 0; padding: 0; margin-bottom: 1rem;
}
legend { border: 0; padding: 0; font-weight: 600; text-transform: uppercase; letter-spacing: .06rem; font-size: .8rem; color: #bbbbbb; margin-bottom: 0.5rem; display: block; margin-bottom: 0.5rem; overflow: hidden; position: relative; width: 100%;
}
legend:after { content: ""; width: 100%; position: absolute; height: 1px; top: 0.5rem; margin-left: 0.5rem; background: #dfdfdf;
}
form { max-width: 600px; margin: 0 auto;
}
.form-row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-wrap: nowrap; flex-wrap: nowrap;
}
@media (min-width: 700px) { .form-row { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; }
}
.form-control { position: relative; padding-left: 0.5rem; padding-right: 0.5rem; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1;
}
input { -webkit-appearance: none; -moz-appearance: none; appearance: none; box-shadow: 0; margin: 0; font-family: inherit; font-weight: 400; line-height: normal; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; outline: 0; display: block; margin-bottom: 1rem; text-align: left; color: #444; border-radius: 3px; border: 1px solid #dfdfdf; font-size: 1rem; height: 3rem; padding: 0 .85rem; width: 100%;
}
input + label { pointer-events: none; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; position: absolute; top: 6px; left: 10px; font-size: 11px; font-weight: bold; color: #bbbbbb; padding-left: 5px; padding-right: 5px; display: block; visibility: hidden; opacity: 0;
}
.is-focused input { border-color: #298eea;
}
.is-active input { padding: 1.3rem 0.85rem 0.45rem 0.85rem !important;
}
.is-active input + label { visibility: visible; opacity: 1;
}
.is-focused.is-active input + label { color: #298eea;
}
.float-label { position: relative;
}

Floating Labels - Script Codes JS Codes

$('input').on('focus', function() {	$(this).parent().addClass('is-focused');
});
$('input').on('input', function() {	if($(this).val() == '') {	$(this).parent().removeClass('is-active');	} else {	$(this).parent().addClass('is-active');	}
});
$('input').on('blur', function() {	$(this).parent().removeClass('is-focused');	if($(this).val() == '') {	$(this).parent().removeClass('is-active');	}
});
$(document).ready(function() {	$('input').each(function () {	if($(this).val() == '') {	$(this).parent().removeClass('is-active');	} else {	$(this).parent().addClass('is-active');	}	});
});
Floating Labels - Script Codes
Floating Labels - Script Codes
Home Page Home
Developer John Heiner
Username johnheiner
Uploaded November 14, 2022
Rating 3.5
Size 3,880 Kb
Views 8,096
Do you need developer help for Floating 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!

John Heiner (johnheiner) Script Codes
Name
SVG line hover
Breathing Halftone
Image Hover
Passport Flip Open with GSAP
Logo Animation
A Pen by John Heiner
Canvas Mask Page Intro Animation
Rounded Triangle
Material Shadows
Animated River Depth measurement
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!