dmitrylebedev/Input-label.html

## Input-label.html
<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <style>

      body {
        padding: 40px;
        font-family: "Helvetica Neue";
      }

      .input-wrapper {
        position: relative;
        display: inline-block;
        verical-align: baseline;
        line-height: 14px;
        margin: 0 10px;
      }

      label {
        position: absolute;
        top: 14px;
        left: 20px;
        padding: 0 2px;
        color: #bbb;
        font-size: 11px;
        text-transform: uppercase;
        z-index: 2;
        pointer-events: none;
        background: #fff;
        transition: transform 200ms ease;
        transform: translateY(-20px);
      }

      label:before {
        content: attr(data-first);
        white-space: nowrap;
      }

      input {
        position: relative;
        padding: 10px 20px 12px 20px;
        width: 300px;
        font-size: 13px;
        color: #555;
        outline: none;
        border: 1px solid #bbb;
        border-radius: 20px;
      }

      input:invalid + label {
        transform: translateY(0);
      }

      input:focus + label {
        transform: translateY(-20px);
      }

      input:focus + label:before {
        content: attr(data-second);
        border-color: #2b96f1;
        color: #2b96f1;
      }

      input:required:invalid + label[data-first][data-second]:before {
        content: attr(data-first);
      }

      input:required:focus + label[data-first][data-second]:before {
        content: attr(data-second);
      }

      input:required + label[data-second]:before {
        content: attr(data-second);
      }

    </style>

    <div class="input-wrapper">
      <input type="text" id="user" required>
      <label data-first="Владелец карты (имя и фамилия с карты)" data-second="Владелец карты"></label>
    </div>

    <details>
      <a href="http://codepen.io/dmitrylebedev/pen/bEQKoP">Demo</a>
    </details>

  </body>
</html>
	<!DOCTYPE html>
	<html lang="ru">
	<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	</head>
	<body>
	<style>

	body {
	padding: 40px;
	font-family: "Helvetica Neue";
	}

	.input-wrapper {
	position: relative;
	display: inline-block;
	verical-align: baseline;
	line-height: 14px;
	margin: 0 10px;
	}

	label {
	position: absolute;
	top: 14px;
	left: 20px;
	padding: 0 2px;
	color: #bbb;
	font-size: 11px;
	text-transform: uppercase;
	z-index: 2;
	pointer-events: none;
	background: #fff;
	transition: transform 200ms ease;
	transform: translateY(-20px);
	}

	label:before {
	content: attr(data-first);
	white-space: nowrap;
	}

	input {
	position: relative;
	padding: 10px 20px 12px 20px;
	width: 300px;
	font-size: 13px;
	color: #555;
	outline: none;
	border: 1px solid #bbb;
	border-radius: 20px;
	}

	input:invalid + label {
	transform: translateY(0);
	}

	input:focus + label {
	transform: translateY(-20px);
	}

	input:focus + label:before {
	content: attr(data-second);
	border-color: #2b96f1;
	color: #2b96f1;
	}

	input:required:invalid + label[data-first][data-second]:before {
	content: attr(data-first);
	}

	input:required:focus + label[data-first][data-second]:before {
	content: attr(data-second);
	}

	input:required + label[data-second]:before {
	content: attr(data-second);
	}

	</style>

	<div class="input-wrapper">
	<input type="text" id="user" required>
	<label data-first="Владелец карты (имя и фамилия с карты)" data-second="Владелец карты"></label>
	</div>

	<details>
	<a href="http://codepen.io/dmitrylebedev/pen/bEQKoP">Demo</a>
	</details>

	</body>
	</html>