• Страница 1 из 1
  • 1
Форум » Веб-разработка » Скрипты для сайтов » Расширение поля ввода CSS по клику курсора (Это пример стильного расширяемого поля ввода в один клик)
Расширение поля ввода CSS по клику курсора
Kosten
Дата: Вторник, 2019-11-12, 20:47 | Сообщение 1
Оффлайн
Администраторы
Сообщений:25239
Награды: 57


Это пример стильного расширяемого поля ввода, использующего только чистое решение CSS. Анимация и эффект расширяют поле ввода после нажатия на него. Разметка HTML проста и легка благодаря определению элемента input и span внутри элемента div, чтобы гарантировать, что анимированная граница не переполняется и не нарушает пользовательский интерфейс.

Далее, мы используем разметку freebee «grow-search», чтобы увеличить ширину поиска, пока он выбран. CSS в основном сосредоточен на поведении, пока он выбран или представлен, он завис.

Контур специально сделан не для ввода, пока он находится в выбранном состоянии. Важная часть этого фрагмента растет, что достигается увеличением ширины при выборе ввода. Вы получаете представление об использовании различных видов анимации и эффектов.



HTML

Код
    <ul id="growing-search-freebie">
  <li>
   <!-- Start Freebie Markup -->
   <div class="growing-search">
    <div class="input">
     <input type="text" name="search"/>
    </div><!-- Space hack --><div class="submit">
     <button type="submit" name="go_search">
       <span class="fa fa-search"></span>
     </button>
    </div>
   </div>
   <!-- End Freebie Markup -->
  </li>
    </ul>

CSS

Код
.growing-search {
    padding: 5px 5px 5px 7px;
    border-radius: 5px;
    background: #fff;
}

.growing-search div {
    display: inline-block;
    font-size: 12px;
}

.growing-search .input input {
    margin-right: 0;
    border: none;
    font-size: inherit;
    transition: width 200ms;
    padding-top: 5px;
    padding-left: 5px;
    padding-bottom: 5px;
    width: 55px;
    color: #aaa;
    border-bottom: 1px solid #eee;
}

.growing-search .input input:focus {
    width: 150px;
}

.growing-search .submit button {
    margin-left: 0;
    border: none;
    font-size: 1.15em;
    color: #aaa;
    background-color: #fff;
    padding-top: 2px;
    padding-bottom: 2px;
    transition: color 200ms;
}

.growing-search .input input:hover, .growing-search .submit button:hover {
    cursor: pointer;
}

.growing-search .input input:focus, .growing-search .submit button:focus {
    outline: none;
}

.growing-search .submit button:hover {
    color: #3498db;
}

Вы можете изменить этот код, чтобы изменить стиль, цвет, и внешний вид границы.

Демонстрация
Прикрепления: 4777738.png(5.0 Kb) · css-input-field.zip(3.6 Kb)
Страна: (RU)
Форум » Веб-разработка » Скрипты для сайтов » Расширение поля ввода CSS по клику курсора (Это пример стильного расширяемого поля ввода в один клик)
  • Страница 1 из 1
  • 1
Поиск: