mocon/material_design_inputs.html

## material_design_inputs.html
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <style>
    .centered {
      display: block;
      width: 320px;
      margin: 60px auto;
    }

    .red {
      color: red;
    }

    .form-group {
      position: relative;
    }

    label {
      font-weight: 300;
      margin: 0;
      color: #ccc;
      opacity: 0;
      position: absolute;
      font-size: 16px;
      top: 0;
      transition: none;
      height: 20px;
      pointer-events: none;
    }

    label.focus {
      opacity: 1;
      top: -15px;
      font-size: 12px;
      transition: font-size .15s ease-in, opacity .15s ease-in;
    }

    input[type="email"], input[type="password"] {
      border: none;
      border-bottom: 1px solid #ccc;
      box-shadow: none;
      border-radius: 0;
      margin: 15px 0 30px;
      padding: 15px 0;
    }

    input[type="email"]:focus, input[type="password"]:focus {
      outline: none;
      box-shadow: none;
      border-color: red;
    }

    button.big {
      display: block;
      width: 100%;
      margin: 30px 0;
      border: none;
      background: red;
      border-radius: 2px;
      color: white;
      font-weight: 600;
      padding: 10px
    }
  </style>
  <div class="centered">
    <form>
      <div class="form-group">
        <label></label>
        <input type="email" class="form-control" placeholder="Email address">
      </div>
      <div class="form-group">
        <label></label>
        <input type="password" class="form-control" placeholder="Password">
      </div>
      <button type="submit" class="btn btn-default big">Go</button>
    </form>
  </div>
  <script>
    var ph = '';

    $('input').on('focus', function(){
      ph = $(this).attr('placeholder');
      $(this).prev('label').text(ph).addClass('focus');
      $(this).attr('placeholder', '');
    });

    $('input').on('blur', function(){
      $(this).prev('label').removeClass('focus');
      $(this).attr('placeholder', ph);
    });
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
	<script src="https://code.jquery.com/jquery.min.js"></script>
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body>
	<style>
	.centered {
	display: block;
	width: 320px;
	margin: 60px auto;
	}

	.red {
	color: red;
	}

	.form-group {
	position: relative;
	}

	label {
	font-weight: 300;
	margin: 0;
	color: #ccc;
	opacity: 0;
	position: absolute;
	font-size: 16px;
	top: 0;
	transition: none;
	height: 20px;
	pointer-events: none;
	}

	label.focus {
	opacity: 1;
	top: -15px;
	font-size: 12px;
	transition: font-size .15s ease-in, opacity .15s ease-in;
	}

	input[type="email"], input[type="password"] {
	border: none;
	border-bottom: 1px solid #ccc;
	box-shadow: none;
	border-radius: 0;
	margin: 15px 0 30px;
	padding: 15px 0;
	}

	input[type="email"]:focus, input[type="password"]:focus {
	outline: none;
	box-shadow: none;
	border-color: red;
	}

	button.big {
	display: block;
	width: 100%;
	margin: 30px 0;
	border: none;
	background: red;
	border-radius: 2px;
	color: white;
	font-weight: 600;
	padding: 10px
	}
	</style>
	<div class="centered">
	<form>
	<div class="form-group">
	<label></label>
	<input type="email" class="form-control" placeholder="Email address">
	</div>
	<div class="form-group">
	<label></label>
	<input type="password" class="form-control" placeholder="Password">
	</div>
	<button type="submit" class="btn btn-default big">Go</button>
	</form>
	</div>
	<script>
	var ph = '';

	$('input').on('focus', function(){
	ph = $(this).attr('placeholder');
	$(this).prev('label').text(ph).addClass('focus');
	$(this).attr('placeholder', '');
	});

	$('input').on('blur', function(){
	$(this).prev('label').removeClass('focus');
	$(this).attr('placeholder', ph);
	});
	</script>
	</body>
	</html>