В таких браузерах для настольных компьютеров, как 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

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

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

• Меню для всех страниц с возможностью подсветки текущего пункта 
• Использование возможностей декорирования выделения элементов 
• Фоны, изменяющие положение в зависимости от движения указателя