Как запретить изменение размеров элемента формы textarea?

5 / 5

Автор: Администратор

01.08.2015

Теги: css, textarea, style, resize

В этой статье мы расскажем, как убрать изменение размеров для <textarea> пользователям. Другими словами, как сделать поле для ввода текста с фиксированным размером.

Дело в том, что по-умолчанию элементу формы <textarea> разрешается изменение его размеров, при помощи растягивания его за правый нижний угол. Не всегда такой вариант подходит для вашей формы, так как увеличение области для текста влечет за собой изменение всей страницы и даже, возможно, его некорректному отображению.

Для того, чтобы запретить изменение размеров <textarea> необходимо при помощи CSS свойств добавить ему resize, которое принимает следующие свойства:

none - размеры элемента не изменяются.
both - можно изменять размеры элемента по горизонтали и вертикали.
horizontal - можно изменять размеры элемента только по горизонтали.
vertical - можно изменять размеры элемента только по вертикали.

Это свойство появилось только в спецификации CSS3 и в некоторых случаях может не работать или приводить к ошибке валидации.

Рассмотрим пример кода:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Страница</title>
    <link rel="stylesheet" href="/../css/template.css" type="text/css" />
</head>
<body>
	<textarea>Изменяется и по горизонтали и по вертикали</textarea><br>
	<textarea class="vertical">Изменяется только по вертикали</textarea><br>
	<textarea class="horizont">Изменяется только по горизонтали</textarea><br>
	<textarea class="none">Никак не изменяется</textarea>
</body>
</html>

textarea {
	resize: both;
	height:200px;
	width:400px;
	margin:20px;
}
	textarea.horizont {
		resize: horizontal;
	}
	textarea.vertical {
		resize: vertical;
	}
	textarea.none {
		resize: none;
	}

Результат вы можете наблюдать на демо-странице:

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

Авторизоваться с помощью:

Поиск по сайту

Топ 10 активных пользователей

Имя пользователя Баллы
gawk
44.20
ZOMRO
30.60
hr@proovelab
15.00
intuit89
8.40
Varvarka
4.00
Akyla58
3.00
AnnaOl
3.00
dimasik_3557
3.00
ErcardSa
3.00
Galinamuh
3.00

Рекламные ссылки

Пожертвования

icon donate

Yandex.Money: 410011571748395

Webmoney:

R362907776401 (Рубли)

Z410919458006 (Доллары)

Похожие материалы

Языки программирования сайтов Просмотров 15670

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

Теги:

css, html, javascript, php, веб

Комментариев: 0 Подробнее

Удобное собрание CSS хаков для самых поп... Просмотров 10630

Удобное собрание CSS хаков для самых популярных браузеров

Для каждого хорошего верстальщика в какой-то момент времени встает вопрос кроссбраузерности. Что такое кроссбраузерность? Это свойство сайта или дизайна сайта отображаться одинакого в разных барузерах. Дело в том, что при создании браузеров разработчики не сильно задумываются о стандартизации, это порождает разное представление одного и того же сайта в их продукции. Создание кроссбраузерной верстки/сайта и позволяет преодолеть эту разницу.

Теги:

css, хаки, hacks, читы

Комментариев: 0 Подробнее

!important в CSS Просмотров 3959

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

Теги:

css, css3, style, !important

Комментариев: 0 Подробнее

Как подключать свои шрифты на сайт, или ... Просмотров 6113