Clean Animated Input Labels
How do I make an clean animated input labels?
Without placeholder attribute and focus selector to support IE 7-9. What is a clean animated input labels? How do you make a clean animated input labels? This script and codes were developed by Andres on 14 January 2023, Saturday.
Clean Animated Input Labels Previews
Clean Animated Input Labels - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Clean Animated Input Labels</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url("https://fonts.googleapis.com/css?family=Roboto");
* { margin: 0; padding: 0; box-sizing: border-box;
}
body { font: 16px/1 'Roboto', sans-serif; text-align: center; color: #555; background: #ddd;
}
.title { padding: 35px 0 40px; color: #999; border-bottom: 1px solid #aaa;
}
.title span { display: block; margin: 0 0 15px; font-size: 30px; color: #555;
}
.demo { padding: 35px 0; border-bottom: 1px solid #aaa; background: #eee;
}
.demo:nth-child(odd) { background: none;
}
.demo:last-child { border: 0;
}
button,
input,
select,
textarea { font-family: inherit; font-size: 100%; vertical-align: baseline; border: 0; outline: 0;
}
button::-moz-focus-inner,
input::-moz-focus-inner { border: 0; padding: 0;
}
input[type='text'] { width: 220px; padding: 10px 10px 12px 60px; font-size: 12px; color: #555; border: 1px solid #aaa; background-color: #fff;
}
.css { display: inline-block; position: relative; margin: 0 5px 0 0;
}
.css input { transition: .1s all linear;
}
.css label { position: absolute; top: 13px; left: 15px; font-size: 12px; color: #aaa; transition: .1s all linear; cursor: text;
}
.demo1 .css.active input { padding-left: 45px;
}
.demo1 .css.active label { left: 6px; opacity: .5;
}
.demo2 .css.active input { padding-left: 15px;
}
.demo2 .css.active label { top: 3px; font-size: 9px; opacity: .8;
}
.demo3 .css.active input { padding-left: 15px;
}
.demo3 .css.active label { top: -18px;
}
.demo4 .css.active input { padding-left: 15px;
}
.demo4 .css.active label { top: 0; left: 0; font-size: 40px; opacity: .1;
}
.demo5 .css.active label { top: 8px; left: 10px; padding: 5px; color: #fff; background: #aaa;
}
.demo6 .css.active input { padding-left: 70px;
}
.demo6 .css.active label { top: 0; left: 0; padding: 14px; color: #fff; background: #aaa;
}
.demo7 .css.active label { top: 8px; left: 10px; padding: 5px; background: #eee; box-shadow: inset 0 0 0 1px #aaa;
}
.demo8 .css.active input { padding-left: 25px;
}
.demo8 .css.active label { top: 15px; left: 0; font-size: 10px; transform: rotate(-90deg);
}
.demo9 .css.active input { padding-left: 15px;
}
.demo9 .css.active label { top: -15px; left: 0; padding: 3px 5px; font-size: 10px; color: #fff; background: #aaa;
}
.demo10 .css.active input { padding-left: 15px;
}
.demo10 .css.active label { top: 39px; left: 0; width: 220px; padding: 3px 5px; font-size: 10px; color: #fff; background: #aaa;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="title"> <span>Clean Animated Input Labels</span> without placeholder attribute and focus selector to support IE 7-9
</div>
<div class="demo demo1"> <div class="css"> <label for="d1">NAME</label> <input id="d1" type="text" /> </div> <div class="css"> <label for="d2">NAME</label> <input id="d2" type="text" /> </div>
</div>
<div class="demo demo2"> <div class="css"> <label for="d3">NAME</label> <input id="d3" type="text" /> </div> <div class="css"> <label for="d4">NAME</label> <input id="d4" type="text" /> </div>
</div>
<div class="demo demo3"> <div class="css"> <label for="d5">NAME</label> <input id="d5" type="text" /> </div> <div class="css"> <label for="d6">NAME</label> <input id="d6" type="text" /> </div>
</div>
<div class="demo demo4"> <div class="css"> <label for="d7">NAME</label> <input id="d7" type="text" /> </div> <div class="css"> <label for="d8">NAME</label> <input id="d8" type="text" /> </div>
</div>
<div class="demo demo5"> <div class="css"> <label for="d9">NAME</label> <input id="d9" type="text" /> </div> <div class="css"> <label for="d10">NAME</label> <input id="d10" type="text" /> </div>
</div>
<div class="demo demo6"> <div class="css"> <label for="d11">NAME</label> <input id="d11" type="text" /> </div> <div class="css"> <label for="d12">NAME</label> <input id="d12" type="text" /> </div>
</div>
<div class="demo demo7"> <div class="css"> <label for="d13">NAME</label> <input id="d13" type="text" /> </div> <div class="css"> <label for="d14">NAME</label> <input id="d14" type="text" /> </div>
</div>
<div class="demo demo8"> <div class="css"> <label for="d15">NAME</label> <input id="d15" type="text" /> </div> <div class="css"> <label for="d16">NAME</label> <input id="d16" type="text" /> </div>
</div>
<div class="demo demo9"> <div class="css"> <label for="d17">NAME</label> <input id="d17" type="text" /> </div> <div class="css"> <label for="d18">NAME</label> <input id="d18" type="text" /> </div>
</div>
<div class="demo demo10"> <div class="css"> <label for="d19">NAME</label> <input id="d19" type="text" /> </div> <div class="css"> <label for="d20">NAME</label> <input id="d20" type="text" /> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Clean Animated Input Labels - Script Codes CSS Codes
@import url("https://fonts.googleapis.com/css?family=Roboto");
* { margin: 0; padding: 0; box-sizing: border-box;
}
body { font: 16px/1 'Roboto', sans-serif; text-align: center; color: #555; background: #ddd;
}
.title { padding: 35px 0 40px; color: #999; border-bottom: 1px solid #aaa;
}
.title span { display: block; margin: 0 0 15px; font-size: 30px; color: #555;
}
.demo { padding: 35px 0; border-bottom: 1px solid #aaa; background: #eee;
}
.demo:nth-child(odd) { background: none;
}
.demo:last-child { border: 0;
}
button,
input,
select,
textarea { font-family: inherit; font-size: 100%; vertical-align: baseline; border: 0; outline: 0;
}
button::-moz-focus-inner,
input::-moz-focus-inner { border: 0; padding: 0;
}
input[type='text'] { width: 220px; padding: 10px 10px 12px 60px; font-size: 12px; color: #555; border: 1px solid #aaa; background-color: #fff;
}
.css { display: inline-block; position: relative; margin: 0 5px 0 0;
}
.css input { transition: .1s all linear;
}
.css label { position: absolute; top: 13px; left: 15px; font-size: 12px; color: #aaa; transition: .1s all linear; cursor: text;
}
.demo1 .css.active input { padding-left: 45px;
}
.demo1 .css.active label { left: 6px; opacity: .5;
}
.demo2 .css.active input { padding-left: 15px;
}
.demo2 .css.active label { top: 3px; font-size: 9px; opacity: .8;
}
.demo3 .css.active input { padding-left: 15px;
}
.demo3 .css.active label { top: -18px;
}
.demo4 .css.active input { padding-left: 15px;
}
.demo4 .css.active label { top: 0; left: 0; font-size: 40px; opacity: .1;
}
.demo5 .css.active label { top: 8px; left: 10px; padding: 5px; color: #fff; background: #aaa;
}
.demo6 .css.active input { padding-left: 70px;
}
.demo6 .css.active label { top: 0; left: 0; padding: 14px; color: #fff; background: #aaa;
}
.demo7 .css.active label { top: 8px; left: 10px; padding: 5px; background: #eee; box-shadow: inset 0 0 0 1px #aaa;
}
.demo8 .css.active input { padding-left: 25px;
}
.demo8 .css.active label { top: 15px; left: 0; font-size: 10px; transform: rotate(-90deg);
}
.demo9 .css.active input { padding-left: 15px;
}
.demo9 .css.active label { top: -15px; left: 0; padding: 3px 5px; font-size: 10px; color: #fff; background: #aaa;
}
.demo10 .css.active input { padding-left: 15px;
}
.demo10 .css.active label { top: 39px; left: 0; width: 220px; padding: 3px 5px; font-size: 10px; color: #fff; background: #aaa;
}Clean Animated Input Labels - Script Codes JS Codes
$(document).ready(function() { $('input').each(function() { $(this).on('focus', function() { $(this).parent('.css').addClass('active'); }); $(this).on('blur', function() { if ($(this).val().length == 0) { $(this).parent('.css').removeClass('active'); } }); if ($(this).val() != '') $(this).parent('.css').addClass('active'); });
});
| Developer | Andres |
| Username | Angelfire |
| Uploaded | January 14, 2023 |
| Rating | 3 |
| Size | 4,409 Kb |
| Views | 6,072 |
Do you need developer help for Clean Animated Input 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!
Andres (Angelfire) Script Codes
| Name | Size |
| Calendar Widget | 5,831 Kb |
| JQuery Payment | 4,158 Kb |
| Swanky Pure CSS Drop Down Menu V2.0 | 7,247 Kb |
| A Pen by Andres | 2,205 Kb |
| Array vs object | 3,043 Kb |
| Chart.js Infobox | 3,900 Kb |
| Threaded Chat | 3,525 Kb |
| Flexbox Admin Template | 4,741 Kb |
| Angular responsive comment system | 7,439 Kb |
| Simple HTML5 CSS3 JS Project | 6,557 Kb |
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!
Similar Scripts & Codes
| Name | Username | Size |
| Lunar eclipse | Ademilter | 2,056 Kb |
| Elephants Full screen site | Orrinward | 3,981 Kb |
| Experiment | Toddmoy | 2,849 Kb |
| Subtle site navigation with description | Necks | 3,206 Kb |
| Roman Numerical Converter | Vhall_io | 2,102 Kb |
| CSS Google Now | Jackmoran | 3,196 Kb |
| CMP5-Opdracht15 | SannevanGastel | 2,733 Kb |
| Wip elementary os navbar | Nickcolley | 2,993 Kb |
| Form Labels | Bartuc | 2,717 Kb |
| Banner Ad | Raquellorenzana | 4,172 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!