Как запретить изменение размеров ?
Сделать, чтобы размеры текстового поля созданного через тег не изменялись при помощи мыши.
Решение
В современных браузерах Firefox, Safari и Chrome в правом нижнем углу текстового поля есть небольшой уголок (рис. 1) с помощью которого мышью можно изменить размеры поля.
Рис. 1. Вид текстового поля в браузере Chrome
Вид уголка различается, но его функции остаются одинаковыми, если щёлкнуть мышью и потянуть за уголок, то можно изменить размеры поля. Чтобы запретить эту возможность, следует для селектора textarea задать свойство resize со значением none (пример 1).
Пример 1. Использование resize
HTML5 CSS3 IE Cr Op Sa Fx
Размеры текстового поля HTML по теме
CSS по теме
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные рецепты
Как добавить картинку на веб-страницу?
Как добавить иконку сайта в адресную строку браузера?
Как добавить фоновый рисунок на веб-страницу?
Как сделать обтекание картинки текстом?- Как растянуть фон на всю ширину окна?
- Как выровнять фотографию по центру веб-страницы?
Как разместить элементы списка горизонтально?
Как убрать подчеркивание у ссылок?
Как убрать маркеры в маркированном списке?
Как изменить расстояние между строками текста?
Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?- Как открыть ссылку в новом окне?
Запретить изменение размера textarea
HTML textarea. Как убирают элемент изменения размера на HTML или CSS?
Отслеживать
задан 20 апр 2016 в 21:19
3,998 5 5 золотых знаков 20 20 серебряных знаков 35 35 бронзовых знаков
20 апр 2016 в 21:22
@АлексейШиманский спасибо, надо было оформлять как ответ:)
21 апр 2016 в 10:28
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
textarea < resize: none; /* Запрещаем изменять размер */ >Отслеживать
ответ дан 20 апр 2016 в 21:22
3,021 11 11 серебряных знаков 23 23 бронзовых знака
- html
- css
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
CSS изменение размеров textarea
resize: none – запрещает растягивание textarea и убирает уголок ресайза.
Рабочий пример который запрещает растягивание textarea
Разрешить растягивание только по горизонтали
resize: horizontal – разрешает растягивание textarea по горизонтали.
Рабочий пример который запрещает горизонтальное растягивание textarea
Разрешить растягивание только по вертикали
resize: vertical – разрешает растягивание textarea по вертикали.
Рабочий пример который запрещает вертикальное растягивание textarea
Растягивание тега div
Чтобы сделать возможность растягивать элементы, помимо CSS свойства resize: both, нужно ещё добавить display: inline-block и overflow: auto.
Рабочий пример который запрещает вертикальное растягивание textarea
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
- CSS / HTML
- FrontEnd (ФронтЭнд)
Как отключить функцию изменения размера для элемента ?
Браузеры на основе Webkit, такие как Safari Chrome, добавили новый UI элемент к правой нижней части текстовой области, позволяя пользователям изменить размер текстовой области простым нажатием мыши.
Не секрет, что WebKit имеет преимущество над другими браузерами в вопросе управления страницами и CSS функций. Одна из таких скрытых функций — это возможность регулирования размера текстовой области. Firefox дает такую же возможность в Firefox 4.
Если по каким-либо причинам вам необходимо удалить функцию изменения размера вашей текстовой области, CSS3 дает такую возможность контролирования.
В этой статье вы научитесь, как сделать, чтобы HTML элемент имел фиксированный неизменяемый размер.
Для того, чтобы размер текстового поля не изменился, можно использовать CSS свойство resize со значением «none».
Добавьте этот отрывок кода в ваш стиль текстовой области:
textarea < resize: none; >После этого можно использовать свойства height и width для установления фиксированной высоты и ширины (height и width) для вашего элемента текстовой области.
Пример
html> html> head> title>Заголовок документа title> style> .comment < resize: none; height: 100px; width: 350px; > style> head> body> h2>Текстовая область с фиксированной шириной и высотой h2> form> textarea class="comment">Отправьте автору ваши комментарии textarea>br> input type="submit" name="submitInfo" value="Submit"> form> body> html>Или можно задать размер элемента с помощью установления атрибутов cols и rows , которые указывают фиксированное количество колонок и строк.
Пример
html> html> head> title>Заголовок документа title> style> .comment < resize: none; > style> head> body> form> textarea class="comment" rows="10" cols="40">Отправьте автору ваши комментарии. textarea>br> input type="submit" name="submitInfo" value="Submit"> form> body> html>Можно также разрешить пользователям изменить размер элемента только по горизонтали и вертикали с помощью свойства resize со значением «vertical» или «horizontal».
Пример
html> html> head> title>Заголовок документа title> style> .vertical < resize: vertical; > .horizontal < resize: horizontal; > style> head> body> h2>Измените размер текстовой области только по вертикали h2> form> textarea class="vertical" rows="8" cols="50">Отправьте автору ваши комментарии. textarea> h2>Измените размер текстовой области только по горизонтали h2> textarea class="horizontal" rows="8" cols="50">Отправьте автору ваши комментарии. textarea> form> body> html>Изменение размера текстовой области очень полезно, когда вам необходимо печатать длинное сообщение. Конечно, иногда для сохранения дизайна вам может понадобиться отключить функцию изменения размера текстовой области. Но будет лучше разрешить изменение размера элемента.