[CSS]テキストエリアの入力フィールドのサイズ変更を禁止する

2019年7月10日

Form textarea サンプルコード

テキストボックスの右下をドラッグするとテキストエリアのサイズが自由に変更できる。
これを変更できなくするにはCSSの「resize」を設定すると制御することができる。

・制御出来る種類

・リサイズを禁止する
 resize: none;
・幅のみリサイズを許可する
 resize: horizontal
・高さのみリサイズを許可する
 resize: vertical

・サンプルコード

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="utf-8">
		<title>テキストエリアのサイズ変更を禁止する</title>
		<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<div>
			<p>変更可能</p>
			<textarea id="" cols="30" rows="5" style=""></textarea>
		</div>
		<div>
			<p>リサイズ禁止</p>
			<textarea id="" cols="30" rows="5" style="resize: none;"></textarea>
		</div>
		<div>
			<p>幅のみリサイズ可能</p>
			<textarea id="" cols="30" rows="5" style="resize: horizontal;"></textarea>
		</div>
		<div>
			<p>高さのみリサイズ可能</p>
			<textarea id="" cols="30" rows="5" style="resize: vertical;"></textarea>
		</div>
	</body>
</html>

・実行結果

この記事の投稿者最新記事

syanimuni

[Laravel 5.5]ペジネーションの見た目を手早く変更する 2019年8月6日
[XCode]ワークスペースの各エリアの名称と役割について(2) 2019年7月26日
DateTimeクラスについて 2019年7月18日
[PHP]指定日時からn日前、n日後、来年などの日付を計算する 2019年7月17日
[PHP]別のURLにJSON形式のデータを送信して受信側で処理後のステータスを返す 2019年7月12日

コメントするコメントをキャンセル

カレンダー