Запретить изменение размеров - «Формы» » Новости мира Интернет
Mistral представила OCR 4 – ИИ для распознавания документов на 170 языках - «Новости мира Интернет»
Mistral представила OCR 4 – ИИ для распознавания документов на 170 языках - «Новости мира Интернет»
Google научила Gemini 3.5 Flash управлять компьютером и мобильными приложениями - «Новости мира Интернет»
Google научила Gemini 3.5 Flash управлять компьютером и мобильными приложениями - «Новости мира Интернет»
Код в мешке: Rockstar снабдила «дисковую» версию GTA VI для PS5 региональными ограничениями - «Новости сети»
Код в мешке: Rockstar снабдила «дисковую» версию GTA VI для PS5 региональными ограничениями - «Новости сети»
В Steam стартовала летняя распродажа с «чертовски большими» скидками на тысячи игр - «Новости сети»
В Steam стартовала летняя распродажа с «чертовски большими» скидками на тысячи игр - «Новости сети»
Microsoft внезапно продлила поддержку Windows 10 ещё на год - «Новости сети»
Microsoft внезапно продлила поддержку Windows 10 ещё на год - «Новости сети»
ФАС рекомендовала российским операторам не рекламировать 5G, которого нет - «Новости сети»
ФАС рекомендовала российским операторам не рекламировать 5G, которого нет - «Новости сети»
Учёные создали пиксель, который научит дисплеи видеть - «Новости сети»
Учёные создали пиксель, который научит дисплеи видеть - «Новости сети»
Данные по часам в Мониторинге запросов — «Блог для вебмастеров»
Данные по часам в Мониторинге запросов — «Блог для вебмастеров»
Apple готовит крупное обновление: в линейке могут появиться складной iPhone, робот для дома и наушники с камерой - «Новости мира Интернет»
Apple готовит крупное обновление: в линейке могут появиться складной iPhone, робот для дома и наушники с камерой - «Новости мира Интернет»
Valve открыла предзаказы на Steam Machine и готовит SteamOS для обычных ПК - «Новости мира Интернет»
Valve открыла предзаказы на Steam Machine и готовит SteamOS для обычных ПК - «Новости мира Интернет»
Новости мира Интернет » Самоучитель CSS » Формы » Запретить изменение размеров - «Формы»
Internet Explorer Chrome Opera Safari Firefox Android iOS
4.0+ 12.10+ 5.0+ 4.0+ 1.0+

Задача

Сделать, чтобы размеры текстового поля созданного через тег <textarea> не изменялись при помощи мыши.

Решение

В современных браузерах Firefox, Safari и Chrome в правом нижнем углу текстового поля есть небольшой уголок (рис. 1) с помощью которого мышью можно изменить размеры поля.

Рис. 1. Вид текстового поля в браузере Chrome

Вид уголка различается, но его функции остаются одинаковыми, если щёлкнуть мышью и потянуть за уголок, то можно изменить размеры поля. Чтобы запретить эту возможность, следует для селектора textarea задать свойство resize со значением none (пример.;1).

Пример 1. Использование resize

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Размеры текстового поля</title>
  <style>
   textarea {
    width: 90%; /* Ширина поля в процентах */
    height: 200px; /* Высота поля в пикселах */
    resize: none; /* Запрещаем изменять размер */
    
  </style>
 </head>
 <body>
  <form>
   <textarea></textarea>
  </form>
 </body>
</html>

Internet Explorer Chrome Opera Safari Firefox Android iOS 4.0 12.10 5.0 4.0 1.0 Задача Сделать, чтобы размеры текстового поля созданного через тег не изменялись при помощи мыши. Решение В современных браузерах Firefox, Safari и Chrome в правом нижнем углу текстового поля есть небольшой уголок (рис. 1) с помощью которого мышью можно изменить размеры поля. Рис. 1. Вид текстового поля в браузере Chrome Вид уголка различается, но его функции остаются одинаковыми, если щёлкнуть мышью и потянуть за уголок, то можно изменить размеры поля. Чтобы запретить эту возможность, следует для селектора textarea задать свойство resize со значением none (пример.;1). Пример 1. Использование resize HTML5 CSS3 IE Cr Op Sa Fx

Цитирование статьи, картинки - фото скриншот - Rambler News Service.
Иллюстрация к статье - Яндекс. Картинки.
Есть вопросы. Напишите нам.
Общие правила  поведения на сайте.

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

А что там на главной? )))



Комментарии )))