css - 自定义 CSS 调整大小视觉外观

Question

允许div通过这样的方式调整大小非常方便

div {
    resize: vertical;
    overflow: auto;
}

但是也很难看到调整大小按钮。有什么办法可以

a) 自定义

b) 有一个 <div>通过 bottom:0 固定到 div 底部的元素复制这种行为？ div 将有 width:100%以便它显示为横跨底部的条。

Answer 1

我知道你要求纯 CSS，但我不确定这是否可行，所以他是一个替代方案:

a) 您可以使用 Jquery Resizeable ( https://jqueryui.com/resizable/ ) 而不仅仅是“resize: vertical”，然后您可以根据需要使用 CSS 设置图标样式(因为它只是一个 div):

.ui-icon, .ui-widget-content .ui-icon {

}

b) 你可以用 Jquery Resizable 做到这一点:

.ui-icon, .ui-widget-content .ui-icon {
    background-image: (whatever you want here, maybe a down arrow?)
    height:40px;
    width:100%;
}