<div class="pattern1">
<textarea placeholder="① デフォルト"></textarea>
</div>
<div class="pattern2">
<textarea placeholder="② リサイズを禁止"></textarea>
</div>
<div class="pattern3">
<textarea placeholder="③ 横方向のリサイズを禁止"></textarea>
</div>
<div class="pattern4">
<textarea placeholder="④ 縦方向のリサイズを禁止"></textarea>
</div>
<div class="pattern5">
<textarea placeholder="⑤ リサイズにおける最大・最小の幅を指定する"></textarea>
</div>
/* この記述は基本指定なので無視して良いです */
textarea{
width:240px;
height:120px;
font-size:12px;
margin-bottom:15px;
}
/* ① デフォルト(.pattern1) */
.pattern1 textarea{
resize: both;
}
/* ② リサイズを禁止(.pattern2) */
.pattern2 textarea{
resize: none;
}
/* ③ 横方向のリサイズを禁止(.pattern3) */
.pattern3 textarea{
resize: vertical;
}
/* ④ 縦方向のリサイズを禁止(.pattern4) */
.pattern4 textarea{
resize: horizontal;
}
/* ⑤ リサイズにおける最大・最小の幅を指定する(.pattern6) */
.pattern5 textarea{
resize: auto;
max-width: 300px;
max-height: 300px;
min-width: 50px;
min-height: 50px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.