Простая реализация подсказки внутри 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);
});
.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;
}