最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to style resizers - Stack Overflow

programmeradmin3浏览0评论

You know those three lines in the bottom corner of a textarea / div that indicate it can be resized? The ones like these. I want to restyle this icon so the resize functionality of my div is much more obvious. Perhaps something like this. How do I remove these lines while retaining the resize functionality of my div?

I've tried googling and searching SO. The closest I found to someone else asking the same question was this guy, but the best answer suggested turning off resize altogether, which is not what I want.

You know those three lines in the bottom corner of a textarea / div that indicate it can be resized? The ones like these. I want to restyle this icon so the resize functionality of my div is much more obvious. Perhaps something like this. How do I remove these lines while retaining the resize functionality of my div?

I've tried googling and searching SO. The closest I found to someone else asking the same question was this guy, but the best answer suggested turning off resize altogether, which is not what I want.

Share Improve this question edited May 23, 2017 at 10:30 CommunityBot 11 silver badge asked May 24, 2016 at 15:53 user5102448user5102448 3
  • Well if you hide those lines, textarea can't be resized anyway so i can't understand why you want to hide them and keep textarea resizable – gbalduzzi Commented May 24, 2016 at 15:58
  • I have a div in my app I want to make resizeable. But I want something better than those hard to see lines in the bottom corner, to make abundantly clear to the user that this is a resizeable div. The div is black which makes the lines quite hard to see. – user5102448 Commented May 24, 2016 at 16:00
  • 1 Perhaps you're saying that it's just not possible? :o – user5102448 Commented May 24, 2016 at 16:01
Add a ment  | 

3 Answers 3

Reset to default 5

Obs: This answer is for WebKit only, couldn't find for other browsers nor testing with their - names worked.


Not with standard css. The resizer widget, like scrollbars, is typically from OS. You may be able to style it with custom browser selectors, however, that depends on the browser. Webkit can do some limited styling by using the ::-webkit-resizer selector.

textarea::-webkit-resizer {
  background-image: url(http://i.imgur./hQZDwHs.png);
} 
<textarea></textarea>

Also, you can set background-color

textarea::-webkit-resizer {
  background-color: red;
} 
<textarea></textarea>


Extra

  1. You can read emulating frame-resize behavior with divs using jQuery without using jQuery UI post to emulate frame-resize, here you will have more possibilities.
  2. -moz-resizer does not work on Firefox 46.0.1. Fiddle.
  3. All (or most of) Shadow DOM selectors.

You can have a textarea set to a auto resize and removing the resize handler: Follow instructions here:

https://css-tricks./examples/TextareaTricks/

Note that this icon is generated by browser and is not a part of HTML Spec. So you can hide or show it, but you cant change its appearance.

Hope it helps.

html

<div class="form-group resizer">
                <div class="arrow-resizer-textarea"></div>
                <textarea id="mytextArea" class="form-control" placeholder="text here....."></textarea>
            </div>

sass

textarea {
  position: relative;
  z-index: 1;
  min-width: 1141px;
  min-height: 58px;
}

.resizer {
  position: relative;
  display: inline-block;
  &:after {
    content: "";
    border-top: 8px solid #1c87c7;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    -webkit-transform: rotate(-45deg);
    z-index: 1;
    opacity: 0.5;
    position: absolute;
    bottom: 1px;
    right: -3px;
    pointer-events: none;
  }
}
.arrow-resizer-textarea {
  height: 0;
  width: 0;
  border-top: 8px solid #1c87c7;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  -webkit-transform: rotate(-45deg);
  position: absolute;
  bottom: 1px;
  right: -3px;
  pointer-events: none;
  z-index: 2;
}
发布评论

评论列表(0)

  1. 暂无评论