Can I style the resize grabber of textarea?
My designer just gave me the design with text areas with styled resize grabber. The question is: Can I style it or not ?
Solution 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:
Solution 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;
}
Solution 3:
textarea::-webkit-resizer {
border-width: 8px;
border-style: solid;
border-color: transparent orangered orangered transparent;
}
<textarea/>