Как запретить изменение размера textarea html
Перейти к содержимому

Как запретить изменение размера textarea html

  • автор:

Как запретить изменение размера?

Есть меню, сделанное на CSS, без JS. При наведении всё работает, но пункт, который я выбрал (главный), он стает по ширине равный тем блокам, которые внутри его: неактивный пункт: alt textкогда навёл: alt textКак можно сделать, чтобы ширина не изменялась, независимо от ширины внутренних пунктов?

.header_menu>li < vertical-align: middle; display: inline-block; font-size: 17px; height: 40px; >.header_menu li>a < -webkit-transition: color .2s, background .2s, border .2s; -moz-transition: color .2s, background .2s, border .2s; -o-transition: color .2s, background .2s, border .2s; transition: color .2s, background .2s, border .2s; >.header_menu li:hover #sub_header_menu < display: block; >.header_menu li:hover <> .header_menu li>a:hover < background-color: #FD4A29; color: #F0F0F8; -webkit-transition: color .2s, background .2s, border .2s; -moz-transition: color .2s, background .2s, border .2s; -o-transition: color .2s, background .2s, border .2s; transition: color .2s, background .2s, border .2s; >.header_menu a < display: block; border-right: 1px solid #F4F4FC; color: #777777; text-decoration: none; padding: 10px 15px; >#sub_header_menu < display: none; >#sub_header_menu a < border: 0; >#sub_header_menu li < list-style-type: none; >#sub_header_menu

Как запретить изменение размеров textarea на CSS/jQuery?

Textarea – это поле для ввода различной информации на вашем сайте, и, в отличие от похожего тега «input», информация вводиться не в строку, а в столбец.

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

Как запретить изменение размеров textarea на CSS/jQuery?

С одной стороны, это полезная функция, ведь пользователь при написании в это поле большого сообщения может изменить его размеры для того, что было визуально комфортнее воспринимать введенный текст, а с другой – не очень, так как из-за изменения размеров этого окна самим пользователем у вас может в прямом смысле «поехать» дизайн.

Поэтому в каких-то случаях нужно оградить пользователя от этой функции. Как именно – я сейчас расскажу.

Как запретить изменение размеров textarea на CSS?

Поставленная задача на CSS решается очень просто. Для этого нужно воспользоваться свойством «resize»:

   

С другой стороны, если вы все же хотите оставить возможность «растягивания» поля – вы можете воспользоваться свойствами «max-width» и «max-height»:

   

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

Как запретить изменение размеров textarea на jQuery?

На jQuery эти же задачи решаются с помощью метода «css». Для полного запрета изменения размеров:

   

И для частичного ограничения соответственно:

   

Если вдруг какой-то из способов вам показался непонятным – пишите об этом в комментариях.

Как запретить растягивание textarea

Для того чтобы запретить растягивание (изменение размеров) элемента textarea с помощью CSS, вы можете использовать свойство resize и установить его значение в none , vertical , horizontal или both в зависимости от ваших конкретных потребностей.

resize: none – полностью запрещает растягивание элемента.

resize: vertical – разрешает менять только высоту элемента.

resize: horizontal – позволяет менять только ширину элемента.

resize: both – позволяет менять ширину и высоту элемента.

Растягивание также можно ограничить указав минимальные и максимальные значения высоты и ширины.

Например у вас есть форма шириной 200px с текстовым полем внутри. Чтобы поле нельзя было растянуть шире формы, просто указываем максимальную ширину в 100% или любой другой необходимый вам размер.

form < width: 200px; >textarea

А если необходимо чтобы нельзя было и уменьшать ширину, тогда устанавливаем минимальную ширину.

Соответственно с высотой работает все аналогично.

А как сделать чтобы высота автоматически увеличивалась в зависимости от содержимого читайте в нашей статье – как сделать автоматическую высоту textarea

01 сентября 2023

Читайте также
  • Автоматическая высота textarea
  • Стилизация чекбокса
  • Подчеркивание ссылок при наведении
  • Всплывающая подсказка
  • Игры для изучения CSS

Запретить изменение размера textarea

введите сюда описание изображения

HTML textarea. Как убирают элемент изменения размера на HTML или CSS?

Отслеживать

задан 20 апр 2016 в 21:19

3,998 5 5 золотых знаков 21 21 серебряный знак 35 35 бронзовых знаков

20 апр 2016 в 21:22

@АлексейШиманский спасибо, надо было оформлять как ответ:)

21 апр 2016 в 10:28

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

textarea < resize: none; /* Запрещаем изменять размер */ >

Отслеживать

ответ дан 20 апр 2016 в 21:22

3,021 12 12 серебряных знаков 23 23 бронзовых знака

  • html
  • css
Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.6.4.10328

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *