Перемещение placeholder над полем ввода при фокусе

Перемещение placeholder над полем ввода при фокусе

Перемещение placeholder над полем ввода при фокусе

На этом уроке вы узнаете, как заставить placeholder не исчезать, а переместится наверх при заполнении поля формы.

HTML разметка

Форма состоит из двух текстовых полей и кнопки “Подписаться”. Для создания кнопки так же используется поле input, но с типом “submit”.


<div class="container">
    <h2>Premium Subscription</h2>
    <form>
        <div class="inputBox">
          <<input type="text" name="" required="required">
           <span>Full Name</span>
        </div>
        <div class="inputBox">
           <input type="email" name="" required="required">
           <span>Email Address</span>
        </div>
        <div class="inputBox">
           <input type="submit" value="Subscribe" name="">
        </div>
    </form>
</div>

CSS стили

Поместим нашу форму в белый контейнер и выровняем по центру экрана.


@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
*{
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}
body{
    display: flex; / * отображать как гибкий контейнер * /
    justify-content: center; / * горизонтальное выравнивание * /
    align-items: center; / * вертикальное выравнивание * /
    flex-direction: column; / * направление главной оси * /
    min-height: 100vh; / * на всю высоту экрана * /
    background: linear-gradient(45deg,#6190e8,#a7bfe8); / * градиентный общий фон * /
}
.container{
    position: relative; / * относительное позиционирование * /
    padding: 70px 40px; / * поля, чтобы текст не прилипал к краям * /
    background: #fff; / * цвет фона * /
    border-radius: 20px; / * скругление углов * /
    box-shadow: 0 5px 25px rgba(0,0,0,0.2);/ * тень у блока * /
}

Перемещение placeholder над полем ввода при фокусе

Далее красиво оформим поля формы.


.container h2{
    color: #111; / * цвет заголовка * /
    margin-bottom: 45px; / * отступ снизу * /
    line-height: 1em; / * вертикальное выравнивание * /
    font-weight: 500; / * толщина шрифта * /
    padding-left: 10px; / * горизонтальное выравнивание * /
    border-left: 5px solid #e91e63; / * красная линия слева от заголовка * /
}
.inputBox{
    position: relative;
    width: 300px; / * ширина поля * /
    height: 46px; / * высота поля * /
    margin-bottom: 35px; / * отступ снизу * /
}
.inputBox:last-child{
    margin-bottom: 0; / * обнуление отступа под вторым полем * /
}
.inputBox input{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border: 1px solid #111; / * сплошная обводка поля * /
    background: transparent; / * прозрачный фон * /
    padding: 10px;
    border-radius: 4px;
    box-sizing: border-box;
    outline: none;
    font-size: 16px;
    color: #111;
    font-weight: 300;
}
.inputBox span{
    position: absolute;
    top: 1px;
    left: 1px;
    display: inline-block; / * отображать как строчно-блочный элемент * /
    padding: 10px;
    font-size: 16px;
    color: #111;
    font-weight: 300;
    transition: 0.5s; / * плавный переход * /
    pointer-events: none;
}

На картинке ниже, стрелочками обозначены Full Name и Email Address. Это и есть placeholder, что значит заполнители. Когда пользователь начинает заполнять форму, эти надписи исчезают. В этом нет ничего страшного, но было бы немного комфортнее, если надписи остаются в поле зрения.

Перемещение placeholder над полем ввода при фокусе

Перемещение placeholder-ов.

В состоянии фокуса, произошло перемещение вверх.


.inputBox input:focus ~ span,
.inputBox input:valid ~ span{
    font-size: 12px;
    color: #111;
    transform: translateX(-10px) translateY(-32px); / * перемещение placeholder-ов * /
}

Перемещение placeholder над полем ввода при фокусе

Стилизация кнопки


.inputBox input[type="submit"]{
    background: #2196f3;
    color: #fff;
    border: none;
    max-width: 120px;
    cursor: pointer;
    font-weight: 500;
}
.inputBox input[type="submit"]:hover{
    background: #e91e63;
}

Перемещение placeholder над полем ввода при фокусе

Посмотрите пример на CodePen

Источник

НЕТ КОММЕНТАРИЕВ

Оставить комментарий