Floating Labels

Developer
Cory
Size
2,238 Kb
Views
22,264
  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?

Inputs with labels that float to the top of the field when there is a value.. What is a floating labels? How do you make a floating labels? This script and codes were developed by Cory on 13 December 2022, Tuesday.

Floating Labels Previews
IQ Test

Floating Labels - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Floating Labels</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <label for="text"> <div class="label-text">Text</div> <input id="text" type="text"/>
</label>
<label for="number"> <div class="label-text">Number</div> <input id="number" type="number" required/>
</label>
<label for="date"> <div class="label-text">Date</div> <input id="date" type="date" required/>
</label> <script src="js/index.js"></script>
</body>
</html>

Floating Labels - Script Codes CSS Codes

label { position: relative; margin-top: 1em; display: inline-block;
}
input { padding: .5em; outline: none; border: 1px solid #ccc; border-radius: .5em; margin: 0;
}
[required] { box-shadow: 0 0 .25em .25em hsla(0, 0%, 0%, .2);
}
:invalid { border-color: red;
}
.label-text { font-size: .8em; color: #999; font-family: "Helvetica", sans-serif; padding: .5em; -webkit-transition: top .25s; transition: top .25s;
}
.as-placeholder .label-text { position: absolute; top: 0; left: 0;
}
.as-label .label-text { position: absolute; top: -1.6em; padding: .5em .5em .25em .5em; background: #fff;
}

Floating Labels - Script Codes JS Codes

var labels = document.querySelectorAll('label');
Array.prototype.slice.call(labels, 0).forEach(function (label) { label.classList.add('as-placeholder');
});
document.body.addEventListener('focus', function (evt) { var target = evt.target, label = target.labels[0]; if (target.nodeName === 'INPUT' && label) { if (label.classList.contains('as-label')) { return; } else { label.classList.add('as-label'); label.classList.remove('as-placeholder'); } }
}, true);
document.body.addEventListener('blur', function (evt) { var target = evt.target, label = target.labels[0], required = target.required; target.required = false; if (target.nodeName === 'INPUT' && label) { if (target.validity.valid && target.value === "") { label.classList.add('as-placeholder'); label.classList.remove('as-label'); } target.required = required; }
}, true)
Floating Labels - Script Codes
Floating Labels - Script Codes
Home Page Home
Developer Cory
Username uniqname
Uploaded December 13, 2022
Rating 3
Size 2,238 Kb
Views 22,264
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!

Cory (uniqname) Script Codes
Name
X-Picture tag
PictureTime
Memory Leak Demo
Digital Clock
Hover activated accordian with default state
Javascript Digital Clock Example
JS REPL
Audio Player
A content slider
Paper like dialog compoent
Create amazing web content 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!