Simple float label

Developer
Kevin Jannis
Size
3,312 Kb
Views
26,312
  1. Simple float label Previews
  2. Simple float label HTML Codes
  3. Simple float label CSS Codes
  4. Simple float label JS Codes

How do I make an simple float label?

A minimal js example to achieve the float label effect. Works in IE8+ :). What is a simple float label? How do you make a simple float label? This script and codes were developed by Kevin Jannis on 25 August 2022, Thursday.

Simple float label Previews
IQ Test

Simple float label - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple float label</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <form> <h2>Simple float label</h2> <div class="float-label"> <input type="text" placeholder="First name" id="firstname" /> <label for="firstname">First name</label> </div> <div class="float-label"> <input type="text" placeholder="Last name" id="lastname" /> <label for="lastname">Last name</label> </div> <div class="float-label"> <input type="text" placeholder="Email" id="email" /> <label for="email">Email</label> </div> <div class="float-label"> <input type="password" placeholder="Password" id="password" /> <label for="password">Password</label> </div> <div class="float-label"> <textarea placeholder="Comments" id="comments"></textarea> <label for="comments">Comments</label> </div> <button type="submit">Submit</button>
</form> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Simple float label - Script Codes CSS Codes

.float-label { position: relative; margin-bottom: 10px;
}
.float-label textarea { resize: vertical;
}
.float-label input,
.float-label textarea { -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; -moz-appearance: none; -webkit-appearance: none; position: relative; width: 100%; border: solid 1px #eeeeee; font-size: 14px; line-height: 1em; padding: 10px; background: white; z-index: 0;
}
.float-label input + label,
.float-label textarea + label { -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; position: absolute; left: 12px; top: 13px; color: transparent; color: #999999 \9; font-size: .75em; font-weight: bold; line-height: 1em; cursor: text; z-index: 1;
}
.float-label input:focus, .float-label input:active, .float-label input.has-text,
.float-label textarea:focus,
.float-label textarea:active,
.float-label textarea.has-text { outline: none; padding-top: 33px;
}
.float-label input:focus + label, .float-label input:active + label, .float-label input.has-text + label,
.float-label textarea:focus + label,
.float-label textarea:active + label,
.float-label textarea.has-text + label { color: #999999; margin-top: 0;
}
.float-label input:focus, .float-label input:active,
.float-label textarea:focus,
.float-label textarea:active { border-color: #bbbbbb;
}
/* Style the page :) */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0;
}
html,
body { font-family: sans-serif; font-size: 16px;
}
form { display: block; margin: 25px auto; width: 325px;
}
h2 { margin-bottom: .75em;
}
button { -moz-appearance: none; -webkit-appearance: none; width: 100%; border: none; background: #222326; color: white; line-height: 4em; margin-top: 1em;
}

Simple float label - Script Codes JS Codes

/*
Float label example, with minimal JS, JS isn't even required
Made by Kevin Jannis (@kevinjannis)
View more at www.janniskev.in
*/
// We use jQuery to set a class when the input has a value
(function($) { var handleblur = function(evt) { var $this = $(this), val = $this.val(); if (val && val != "") { $this.addClass('has-text'); } else { $this.removeClass('has-text'); } }; $(function() { var labels = $('.float-label'); labels.find('> input, > textarea').on('blur', handleblur).trigger('blur'); });
})(jQuery);
Simple float label - Script Codes
Simple float label - Script Codes
Home Page Home
Developer Kevin Jannis
Username kevinjannis
Uploaded August 25, 2022
Rating 4
Size 3,312 Kb
Views 26,312
Do you need developer help for Simple float label?

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!

Kevin Jannis (kevinjannis) Script Codes
Name
A Pen by Kevin Jannis
A winter wonderland scene
Golfing
V for Vendetta
White House
Adjusting your settings.
DC vs. Marvel
Star Wars The Force Awakens Speeder
Google Chrome logos in CSS
Curated collection of gradient backgrounds
Create amazing Facebook ads 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!