我可以設置textarea的resize抓取器的樣式嗎?

[英]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 ?

我的設計師給了我帶有樣式調整大小抓取器的文本區域的設計。問題是:我可以設計風格嗎?

3 个解决方案

#1


9  

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.

此元素由瀏覽器本身呈現,不屬於HTML規范。除非你的設計師正在創建他們自己的瀏覽器,否則你就會陷入困境。

#2


47  

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

WebKit為resize控件提供了偽元素:: - webkit-resizer,它自動添加到textarea元素的右下角。

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

它可以通過應用display:none或-webkit-appearance:none隱藏:

::-webkit-resizer {
  display: none;
}
<textarea></textarea>

This displays as follows in Chrome 26 on OS X:

這在OS X上的Chrome 26中顯示如下:

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.

注意:添加display:none to :: - webkit-resizer實際上並不會阻止用戶調整textarea的大小,它只是隱藏了控件。如果要禁用調整大小,請將resize CSS屬性設置為none。這也隱藏了控件,並且具有在支持調整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偽元素也允許一些基本樣式。如果您認為調整大小控件可以使用更多顏色,您可以添加:

::-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:

這在OS X上的Chrome 26中顯示如下:

This displays as follows in Chrome 26 on OS X:

#3


10  

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:

您可以使用某些標記創建“自定義”句柄,而不是將CSS應用於:: - webkit-resizer(它似乎不適用於Chrome 56或FireFox 51)。我在谷歌搜索后找到了這個例子:

Custom CSS3 TextArea Resize Handle

自定義CSS3 TextArea調整大小句柄

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 :

來自示例的CSS - 當然,您可以應用任何您喜歡的樣式:

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

注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2012/10/29/724e978cbfe1dc4a7a740a0597fd4874.html



textarea 里設置 style="resize:none" 如何禁用HTML