Can I style the resize grabber of textarea?

Question

My designer just gave me the design with text areas with styled resize grabber. The question is: Can I style it or not ?

Colon

That resize grabber is way too small on 4K monitors. – Beardless

Answer 1

WebKit provides the pseudo-element ::-webkit-resizer for the resize control it automatically adds to the bottom right of textarea elements.

It can be hidden by applying display: none or -webkit-appearance: none:

::-webkit-resizer {
  display: none;
}

<textarea></textarea>

This displays as follows in Chrome 26 on OS X:

Note: Adding display: none to ::-webkit-resizer doesn’t actually prevent the user from resizing the textarea, it just hides the control. If you want to disable resizing, set the resize CSS property to none. This also hides the control and has the added benefit of working in all browsers that support resizing textareas.

The ::-webkit-resizer pseudo-element also allows for some basic styling. If you thought the resize control could use significantly more color you could add this:

::-webkit-resizer {
  border: 2px solid black;
  background: red;
  box-shadow: 0 0 5px 5px blue;
  outline: 2px solid yellow;
}

<textarea></textarea>

This displays as follows in Chrome 26 on OS X:

Wyne

Better example: ::-webkit-resizer{ border: 9px solid rgba(0,0,0,.1); border-bottom-color: rgba(0,0,0,.5); border-right-color: rgba(0,0,0,.5); outline: 1px solid rgba(0,0,0,.2); box-shadow: 0 0 5px 3px rgba(0,0,0,.1) } – Wyne

Hi, Can i place the resizer at the top-right corner? – Howzell

Source: tjvantoll.com/2013/04/15/… – Wyne

March 2018: works on current mainstream release of Safari, does NOT work on current mainstream release of Chrome on MacOS – Conjunction

Does not work on firefox, any solution for that? – Tenderize

Answer 2

Instead of applying CSS to ::-webkit-resizer (which doesn't appear to be working in Chrome 56 or FireFox 51), you can create a "custom" handle using some markup. I found this example after a google search:

Custom CSS3 TextArea Resize Handle

Copied markup in case of future dead link:

<div class="wrap">
  <div class="pull-tab"></div>
  <textarea placeholder="drag the cyan triangle..."></textarea>
</div>

And the CSS from the example - of course, you can apply any style you like :

textarea {
    position: relative;
    margin: 20px 0 0 20px;
    z-index: 1;
}
.wrap {
    position: relative;
    display: inline-block;
}
.wrap:after {
    content:"";
    border-top: 20px solid black;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    -webkit-transform: rotate(-45deg);
    z-index: 1;
    opacity: 0.5;
    position: absolute;
    right: -18px;
    bottom: -3px;
    pointer-events: none;
}
.pull-tab {
    height: 0px;
    width: 0px;
    border-top: 20px solid cyan;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    -webkit-transform: rotate(-45deg);
    position: absolute;
    bottom: 0px;
    right: -15px;
    pointer-events: none;
    z-index: 2;
}

Paunch

Answer 3

textarea::-webkit-resizer {
  border-width: 8px;
  border-style: solid;
  border-color: transparent orangered orangered transparent;
}

<textarea/>

Bostow

Answer 4

Why not just show a background image? http://jsfiddle.net/1n0d529p/

textarea {
  background: url(https://image.flaticon.com/icons/svg/133/133889.svg)no-repeat rgba(71, 108, 193, 0.52) 99.9% 100%;
  background-size: 12px;
}

Costplus

The answer to your question is that the image disappears when the scroll bar is showing up. – Seeder

Update your fiddle now, seems like background image used is throwing 404 – Tenderize

Answer 5

Styling the resize grabber of textarea using @HorusKol's approach

Codepen url

textarea {
    /* Ignore this part of code - basic textarea formatting */
    margin-top: 20px;
    margin-left: 20px;
    width:300px;
    padding:20px;
    border:1px solid #CCC;
    border-radius: 4px;
    /* Comment below line to resize horizontal + vertical */
    resize:vertical 
    /* Step 1 */
    position: relative;
}
    /* Step 2 */
.wrap {
    position: relative;
    display: inline-block;
}
    /* Step 3 - - Sets the 1st line of resize icon */
.wrap:after {
    content:"";
    border-top: 2px solid #555;
    width:16px;
    transform: rotate(-45deg);
    background:transparent;
    position: absolute;
    right: 1px;
    bottom: 14px;
    pointer-events: none;
    border-radius:25%;
}
    /* Step 4 - Sets the 2nd line of resize icon */
.pull-tab {
    border-top: 2px solid #555;
    width:10px;
    transform: rotate(-45deg);
    position: absolute;
    bottom: 10px;
    right: 1px;
    pointer-events: none;
    border-radius:25%;
}
    /* Step 5 - Removes the default resizer grabber icon */
::-webkit-resizer{
  display:none;
}

<div class="wrap">
    <div class="pull-tab"></div>
    <textarea placeholder="Customized resizer grabber...">
    </textarea>
</div>

Gens

Answer 6

I managed to do so this way:

.textarea-container:before {
    content: '';
    background-image: url('svg/textarea-resize.svg');
    background-size: 16px;
    background-repeat: no-repeat;
    position: absolute;
    width: 20px;
    height: 20px;
    bottom: 2px;
    right: 0;
    pointer-events: none;
}

Thoth

Input Element is not supporting for pseudo code #3287491 – Aldis

@Aldis it is meant to be used in a parent. e.g. <div class="textarea-container"><textarea /></div> – Thoth

Answer 7

textarea {
  resize: none;
}

<textarea cols="72" rows="14"></textarea>

Hygroscope

I think the Original Poster asked that how can you change the style of the "resize grabber", not how to remove it. Your code just removes the resize feature. – Sombrous