CSS 文本输入框右下角的尺寸控件(三斜线：-webkit-resizer)消除，以及如何配置其样式，添加 resize 让标签元素可进行拖拽放大。

news2025/2/23 18:49:55

前言：在日常的前端开发中，不管是原始的和还在在各类组件库中的文本输入框中，元素内容的右下角总是有一个三斜线的样式，本文简单了解它是什么？如何去控制并修改样式？

一、它是？

这三个斜线其实是一个控制元素大小的手柄，出现在可调整大小元素的角落用来标识这个元素是否可以进行拖拽调整大小，常以三个斜线的形式出现，所以不仅仅是在文本输入框中有它，任何可以进行拖拽调整大小的元素的右下角都包含这个私用的样式（-webkit-resizer）。

介绍：resizer 属性用于控制元素尺寸调整的用户界面组件，通常出现在可调整尺寸的元素边缘。在浏览器中，它通常用于 textarea、input 等元素上，允许用户拖动调整元素的尺寸。一些浏览器允许你通过伪元素来控制这个 resizer，以便定制它的样式或隐藏它。例如，WebKit 浏览器允许通过 ::-webkit-resizer 伪元素来控制它的样式。

所以只要给元素设置 resize:both; 属性，允许该元素在水平和竖直方向上进行大小调整，都会出现这个控件样式

例如：

.div-box{
    resize:both; /*允许该元素在水平和竖直方向上进行大小调整*/ 
    overflow:auto; /*有些元素需要同时设置, resize 才有效 */
}

二、配置它的样式

// 和平时一样的 css 样式一般设置属性即可  .div-box 请替换成实际情况下的
.div-box::-webkit-resizer{
     width:10px;// 控件宽度
    height:10px;//控件高度
    background-color:red;// 控件颜色

}

隐藏方法：

.div-box 请替换成实际情况下的
隐藏三斜线这个标记样式：
1.。
2.设置::-webkit-resizer 的 background-colorw 颜色为透明。
3.将::-webkit-resizer 的宽度或者高度设置为 0 。

// 方法一： 取消元素可拖拽属性
.div-box{
    resizer:noen;
}

// 方法二：设置::-webkit-resizer 的 background-colorw 颜色为透明
.div-box::-webkit-resizer{
    background-color:transparent; 透明色
}

// 方法三：将::-webkit-resizer 的宽度或者高度设置为 0 
.div-box::-webkit-resizer{
      width:0px;// 或则  height:0px;
}

使用图片替换原样式效果：

默认的样式为三个斜线，一旦在::-webkit-resizer 基础上添加了自己的样式之后，这个默认样式则后被取消，
我们可以通过 background-img 导入图片快速的给它一个好看的图标：
.div-box::-webkit-resizer {
    width: 10px;
    height: 10px;
    background-image: url("@/assets/img/public/delete.png");  // 这个图片地址请切换成你自己的
    background-size: 100% 100%;
  }

原效果