How to make textarea resizable and change its default outline style

  1. 1. Resize
  2. 2. Outline

Resize

Switch on / off resize of a textarea on horizontal / vertical / both.

1
<textarea style="resize:horizontal"></textarea>

The resize property can be either:

  • vertical: only resize vertically
  • horizontal: only resize horizontally
  • none: disable resize (also remove the resize area on right bottom.)

Outline

Remove or change style of outline when textarea is focused on safari / chrome etc.

1
<textarea class="customize"></textarea>

1
2
3
.customize:focus{
outline-color:red;
}