<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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.