CSS更改文本区域上调整大小按钮的光标样式

Posted 2023-05-07

【中文标题】CSS更改文本区域上调整大小按钮的光标样式

【英文标题】：CSS to change the cursor style of the resize button on a textarea

【发布时间】：2012-04-13 12:35:10

【问题描述】：

我注意到，当悬停和/或单击时，我的文本区域上的调整大小按钮保持为箭头。

在我看来它应该是一个指针。

看到有 css 可以删除或添加调整大小工具到 textarea，

resize:none;

和css改变整个textarea的光标，

cursor:pointer;

但似乎应该有一个css参数来控制调整大小按钮的光标。我一直在环顾四周，但似乎找不到该物业。我可以想出几种在 javascript 或 jquery 中执行此操作的方法，但似乎有点过头了。

那么有没有办法通过 css 为 textarea 的调整大小按钮设置光标？

【参考方案1】：

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":""); )

【讨论】：

非常好。如果有一个 css 解决方案，我会更喜欢它，但这非常有效，谢谢。

是的，我想要简单的 CSS 或浏览器已经这样做了，但到目前为止，这是不行的。上述脚本仅处理右下角（调整大小区域），但可用于在文本区域上随时随地应用鼠标更改

@SpYk3HH 您可能想要删除 myPos.bottom>e.pageY 和 myPos.right>e.pageX 因为您将事件附加到 textarea（光标样式仅在内部有效）

@SpYk3HH 怎么样？我只是说代码会更快地避免这两个操作。在事件处理程序检查鼠标是否在区域之外以移除光标之前，鼠标将离开容器。

jsFiddle 在 OS X 上的 Chrome 中不工作。但在 Firefox 中工作。

【参考方案2】：

这是由浏览器本身呈现的，不是 html 的一部分，因此不能通过 CSS 设置样式。

【讨论】：

看起来像一个javascript解决方案。

查看我的答案以获得更简单的 jQuery 解决方案。

这在 Chrome 中通过将其添加到样式表 FYI 中起作用

【参考方案3】：

你可以在元素的 ":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 伪元素添加了一个半透明的白色背景色，这样你就可以看到它的位置和大小，但你可以让它不可见）

【讨论】：

如何调整此代码以使用 textarea 元素？

【参考方案4】：

这是一个浏览器功能...没有任何样式。有些浏览器甚至不会在文本区域显示调整大小的角。可悲的是，在这一点上可能无法改变。