Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Создание необычного разворачивающегося поля ввода текста

19 ноября 2018 | Опубликовано в css | Нет комментариев »

В таких браузерах для настольных компьютеров, как Safari, Chrome, Firefox и Opera с движком Presto, но не в браузере Internet Explorer и не в браузерах для мобильных устройств, у поля ввода текста есть небольшой элемент для изменения размера, расположенный в правом нижнем углу. Поля ввода текста созданы для ввода текста в них, так что если пользователям нужно больше пространства для этого, у них должна быть такая возможность. При нажатии и перетаскивании элемента для изменения размера у поля ввода текста изменяется блочная модель и при необходимости оно отталкивает другие элементы. Можно воспользоваться этой возможностью для создания необычного поля ввода текста.

 


Обычное поле ввода текста

Начнем с того, что положим элемент поля ввода текста в зеленый блочный элемент:

Если растянуть поле ввода текста, блочный элемент тоже растянется:

Теперь зададим этому блочному элементу абсолютное позиционирование внизу другого элемента:

После этого, если потянуть элемент для изменения размера поля ввода текста вниз, блочный элемент будет расти вверх:

Если задать элементу для изменения размера поля ввода текста размер, уменьшив его, и желтый цвет, что возможно только в браузерах на движке Webkit, то станет совершенно не очевидно, что это поле ввода текста:

textarea {
  width: 12px;
  height: 12px;
}
textarea::-webkit-resizer {
  background: yellow;
}

Возможно, часть элемента для изменения размера поля ввода текста будет видна снизу, ее можно будет не показывать с помощью использования свойства спрятать переполнение на любом из оборачивающих элементов:

Можно задать больше стилей элементу для изменения размера поля ввода текста, задав ему для простоты класс .tab:

  • Отцентрировать его:
.tab { text-align: center; }
  • Спрятать внутреннюю часть поля ввода текста:
textarea { background: none; border: 0; }
  • Разрешить растягивание поля ввода текста только вниз:
textarea { resize: vertical; }
  • Ограничить высоту поля ввода текста:
tab, textarea { max-height: 100px; }

Если растянуть поле ввода текста теперь, станет видно просто больше зеленой области:

Теперь если добавить содержимое в эту зеленую область и расположить его так далеко, чтобы оно не было видно по умолчанию, то при потягивании за элемент для изменения размера поля ввода текста, содержимое станет видимым.

Демонстрация работы

Цвета и другие стили отображения были изменены, чтобы демонстрация выглядела более цельной:

Этот пример не будет корректно отображаться в некоторых версиях браузеров, не будет работать в мобильных версиях браузеров, и ситуации, в которых он будет полезен, не слишком очевидны. Но он показывает многообразие возможностей настройки с помощью кода CSS даже таких элементов, как поле ввода текста, которым мало кто задает стили для изменения их внешнего вида. Надеемся, наш урок вдохновит Вас на эксперименты в этой области.

Автор урока Chris Coyier

Перевод — Дежурка

Смотрите также:




Оставить ответ


семь − = 4

Вставить изображение