我的设计师给了我带有样式调整大小抓取器的文本区域的设计。问题是:我可以设计风格吗?
答案 0 :(得分:53)
WebKit为调整大小控件提供伪元素::-webkit-resizer
,它自动添加到textarea
元素的右下角。
可以通过应用display: none
或-webkit-appearance: none
隐藏它:
::-webkit-resizer {
display: none;
}
<textarea></textarea>
在OS X上的Chrome 26中显示如下:
注意:将display: none
添加到::-webkit-resizer
实际上并不会阻止用户调整textarea的大小,它只是隐藏了控件。如果要禁用调整大小,请将resize
CSS属性设置为none
。这也隐藏了控件,并且具有在支持调整textareas大小的所有浏览器中工作的额外好处。
::-webkit-resizer
伪元素也允许一些基本样式。如果您认为调整大小控件可以使用更多颜色,您可以添加:
::-webkit-resizer {
border: 2px solid black;
background: red;
box-shadow: 0 0 5px 5px blue;
outline: 2px solid yellow;
}
<textarea></textarea>
在OS X上的Chrome 26中显示如下:
答案 1 :(得分:14)
您可以使用某些标记创建“自定义”句柄,而不是将CSS应用于::-webkit-resizer
(在Chrome 56或FireFox 51中似乎不起作用)。我在谷歌搜索后找到了这个例子:
Custom CSS3 TextArea Resize Handle
在未来死链接的情况下复制标记:
<div class="wrap">
<div class="pull-tab"></div>
<textarea placeholder="drag the cyan triangle..."></textarea>
</div>
来自示例的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;
}
答案 2 :(得分:8)
此元素由浏览器本身呈现,不属于HTML规范。除非你的设计师正在创建他们自己的浏览器,否则你就会陷入困境。
答案 3 :(得分:3)
textarea::-webkit-resizer {
border-width: 8px;
border-style: solid;
border-color: transparent orangered orangered transparent;
}
<textarea/>
答案 4 :(得分:1)
我设法这样做:
.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;
}
答案 5 :(得分:0)
为什么不只显示背景图像? 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;
}