我注意到悬停和/或点击时文字区域的调整大小按钮是箭头。
在我看来它应该是一个指针。
看到有css要删除或添加调整大小工具到textarea,
resize:none;
和css来改变整个textarea的光标,
cursor:pointer;
但似乎应该有一个css参数来控制调整大小按钮的光标。我一直在四处寻找,但似乎无法找到房产。我可以想一些在javascript或jquery中做到这一点的方法,但看起来有点矫枉过正。
那么有没有办法通过css为textarea的resize按钮设置光标?
答案 0 :(得分:17)
jQuery中有一种简单的方法可以解决这个问题。
<script type="text/javascript">
$(function() {
$(document).on('mousemove', 'textarea', function(e) {
var a = $(this).offset().top + $(this).outerHeight() - 16, // top border of bottom-right-corner-box area
b = $(this).offset().left + $(this).outerWidth() - 16; // left border of bottom-right-corner-box area
$(this).css({
cursor: e.pageY > a && e.pageX > b ? 'nw-resize' : ''
});
})
});
</script>
请参阅 jsFiddle
一行
$(document).on('mousemove', 'textarea', function(e) { var a=$(this).offset().top+$(this).outerHeight()-16,b=$(this).offset().left+$(this).outerWidth()-16;$(this).css({cursor:e.pageY>a&&e.pageX>b?"nw-resize":""}); })
答案 1 :(得分:9)
这是由浏览器本身呈现的,不是HTML的一部分,因此无法通过CSS设置样式。
答案 2 :(得分:0)
这是一个浏览器功能......没有任何样式。有些浏览器甚至不会在文本区域显示重新调整大小的角落。可悲的是,在这一点上可能无法改变。
答案 3 :(得分:0)
您可以在元素的“:after”伪元素上使用CSS的cursor属性:
#block{
display: block;
width:150px;
height:100px;
border: solid black 1px;
background: red;
}
.resizable{
resize: both;
overflow:auto;
position:relative;
}
.resizable:after{
content:"";
position: absolute;
bottom: 0;
right:0;
display:block;
width:8px;
height:8px;
cursor: nwse-resize;
background-color: rgba(255,255,255,0.5)
}
<div id="block" class="resizable"></div>
(我在:after伪元素上添加了半透明的白色背景色,以便可以看到它的位置和大小,但可以使其不可见)