textareaの幅を設定するには

Firefox textarea
2017.03.26

cssでtextareaの幅を設定しても思い通りにならない

divとtextareaで同じ幅にしてもそろわない
divをtextarea代わりに使うことも考えたけどテキスト入力が出来ないので断念

そこで考えたのが、divの中にtextareaを入れる！
試したらやりたかったことが実現できた！
 


これが試した結果の画面
 

Edge textarea
Edgeの画面
 

Firefox textarea
Firefoxの画面
 

背景とtextareaは、わかりやすいように色を設定してる
3つの箱の上段は、divにテキスト表示
中段は、divにtextareaを入れてスクロールバーが表示されない状態
下段は、divにtextareaを入れてスクロールバーが表示された状態

どうですか、幅がちゃんとそろってるよね
ブラウザの幅を変えてもちゃんと追従して幅がそろう
サンプル画面のtextareaの余白が気になるけど、背景色を白にすれば全然違和感はなくなる

textareaがリサイズされてしまうと枠からはみ出たりするので、cssでresize:noneを設定してる

以下は、cssとhtmlのサンプル

/* body */
#wrapper {
	margin: 0 auto;
	padding: 10px;
	max-width: 380px;
	background-color: #D3D3D3;
}

/* content */
div.content {
	margin : 10px auto;
	padding : 4px;
	line-height: 24px;
	font-size: 16px;
	border : 1px solid black;
	background-color : white;
}

/* textarea test */
textarea.textarea-test {
	margin : 0;
	padding : 0;
	border : 0px;
	resize : none;
	height : 100%;
	width : 100%;
	background-color : #dddddd;
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>textarea-test</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
<link rel="stylesheet" type="text/css" href="site.css" >
</head>

<body>
<div id="wrapper">

<div class="content">
divのみ
</div>

<div class="content">
<textarea class="textarea-test">
divの中にtextarea (スクロールバーなし)
</textarea>
</div>

<div class="content">
<textarea class="textarea-test">
divの中にtextarea (スクロールバーあり)
textarea,TEXTAREA,test,TEST
textarea,TEXTAREA,test,TEST,textarea,TEXTAREA,test,TEST,textarea,TEXTAREA,test,TEST,
textarea,TEXTAREA,test,TEST,textarea,TEXTAREA,test,TEST,textarea,TEXTAREA,test,TEST,
textarea,TEXTAREA,test,TEST,textarea,TEXTAREA,test,TEST,textarea,TEXTAREA,test,TEST,
textarea,TEXTAREA,test,TEST,textarea,TEXTAREA,test,TEST,textarea,TEXTAREA,test,TEST,
textarea,TEXTAREA,test,TEST,textarea,TEXTAREA,test,TEST,textarea,TEXTAREA,test,TEST,
</textarea>
</div>

</div> <!-- wrapper -->
</body>
</html>

コメント