CSS:在前台设置调整大小处理程序并更改大小

Question

我有一篇带有页眉和页脚的文章。对于本文，我使用 resize:both 来调整对象的大小。
如果我将页脚宽度设置为文章宽度，我将无法再获取“浏览器调整大小处理程序”。 我也用 z-index 尝试过，但无济于事。

1. 是否可以将“浏览器调整大小处理程序”设置为前台？
2. 我可以更改“浏览器调整大小处理程序”的大小吗？

HTML:

<article class="widget">
    <header class="widget-header"  draggable="true">
        <span>Title</span>
    </header>
    <section class="widget-content">
        <span>test test test test test test test test test 
            test test test test test test test test test 
            test test test test test test test test test 
            test test test test test </span>
    </section>
    <footer class="widget-footer">
        <span>Footer</span>
    </footer>
</article>

CSS:

.widget{
    position: absolute;
    margin: 4px;
    top:0;
    left:0;
    resize:both;
    overflow: auto;
    max-width: 400px;
    min-width: 200px;
    min-height: 150px;
    width: 300px;
    border: #000 2px solid;
    background-color: #999;
    /*.rounded-corners;*/
}

.widget-header {
    padding:2px 5px;
    background-color: #666;
    color: #CCC;
    /*.header-gradient;*/
}
.widget-content {
    position: absolute;
    top:20px;
    bottom:23px;
    border-top: #000 solid 2px;
    height:auto;
    padding:5px;
}
.widget-footer {
    position: absolute;
    bottom:0;
    left:0;
    right:0;
    padding:2px 5px;

}

Example 尝试在示例中获取调整大小处理程序...这是不可能的。

Answer 1

您可以通过添加属性 pointer-events: none; 来解决这个问题到您的页脚，这将表明该元素永远不会成为鼠标事件的目标。

这是 the updated version :

.widget-footer {
    position: absolute;
    bottom:0;
    left:0;
    right:0;
    padding:2px 5px;

    /* New styles below: */

    pointer-events: none;
}

至于更改调整大小 handle 的显示，仅靠 CSS 是无法完成的。当使用 jQuery UI 之类的东西来管理调整大小的元素时，您可以应用不同的句柄，但默认句柄是基于浏览器和操作系统的，目前无法更改。

备注:

这种方法的缺点是，只有在选择页脚前后的区域时，才能选择页脚文本。要解决此问题，您可以将页脚的 right 属性更改为 ~10px，如果您不需要它具有背景颜色/图像，使其不与调整大小 handle 重叠全部。