Lablel Placeholder

In this example below you will see how to do a Lablel Placeholder with some HTML / CSS and Javascript

This awesome code was written by ChamaraHarindra, you can see more from this user in the personal repository.
You can find the original code on
Copyright ChamaraHarindra ©


  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>Lablel Placeholder</title>
  <link rel='stylesheet prefetch' href=''>

      <link rel="stylesheet" href="css/style.css">



  <div class="demo">
  <div class="input-group">
    <label class="placeholder">Please enter text to search</label>
      <input type="text" class="form-control">
      <span class="input-group-btn">
        <button class="btn btn-success" type="button">Search</button>
  <script src=''></script>


    <script  src="js/index.js"></script>



/*Downloaded from */
body, html {
  background: #dedede;
.demo {
  max-width: 400px;
  margin: 200px auto 0;

.input-group {
  position: relative;

.placeholder {
  position: absolute;
  z-index: 3;
  top: 50%;
  transform: translateY(-50%);
  left: 15px;
  color: red;
  font-weight: normal;
  display: none;
  cursor: text;

/*Downloaded from */
$('.btn-success').on('click', function () {
  if($('.form-control').val() == "") {

$('.placeholder').on('click', function() {