Простая реализация подсказки внутри input-a

Demo

HTML

<div class="inputer">
	<label>Название</label>
	<input type="text" name="">	
</div>

CSS

	.inputer {
		border: 1px solid #ddd;
		position: relative;
		display: block;
		width: 100%;
		max-width: 350px;
		border-radius: 4px;
		overflow: hidden;
	}

	.inputer label {
		position: absolute;
		top: 40%;
		left: 5px;
		opacity: 0;
		transition: all .1s linear;
		visibility: hidden;
		font-size: 12px;
		-webkit-user-select: none;
		   -moz-user-select: none;
		    -ms-user-select: none;
		     -o-user-select: none;
		        user-select: none;
	}

	.inputer label,
	.inputer input::placeholder {
		color: #777;
		font-weight: bold;
		opacity: .8;
	}

	.inputer.active label {
		opacity: 1;
		top: 2px;
		visibility: visible;
		font-size: 11px;
		opacity: .8;
	}

	.inputer.active input {
		padding: 16px 5px 2px !important;
	}

	.inputer input,
	.inputer input:hover,
	.inputer input:focus,
	.inputer input:active {
		box-shadow: none;
		outline: none;
		border:none;
		border-radius: 0; 
		display: block;
		width: 100%;
		padding: 9px 5px;
		font-size: 12px;
	} 

JS

	let inputerFn = (el) => 
	{
		let $el = $(el);
		$el.parent().toggleClass('active', $el.val().length > 0);	
	};

	$('.inputer input').each(function (idx, el) {
		let $el = $(el);
		$el.attr('placeholder', $el.siblings('label').text());
		
		inputerFn(el);
	}).on('input', function () {
		inputerFn(this);		
	});