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 ?

回答1:

This element is rendered by the browser itself and is not part of the HTML spec. Unless your designer is creating their own browser, you're stuck with the one you get.

回答2:

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:

回答3:

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

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

回答5:

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

来源：https://stackoverflow.com/questions/13126917/can-i-style-the-resize-grabber-of-textarea

标签

css

resize

textarea