Vue ElementUI el-input-number 改变控制按钮 icon 箭头为三角形

el-input-number 属性 controls-position 值为 right 时;

html 复制代码
<el-input-number v-model="num" controls-position="right" :min="1" :max="10"></el-input-number>

原生效果

修改后效果

CSS 修改

css 复制代码
.el-input-number {
    .el-input-number__increase {// 上 按钮
        top: 2px;
        .el-icon-arrow-up:before {// 三角形
            content: '';
            display: inline-block;
            height: 0;
            width: 0;
            border-style: solid;
            border-width: 6px 4px 6px 4px;
            border-color: rgba(0,0,0,0) rgba(0,0,0,0) #999999 rgba(0,0,0,0);
            transform: translateY(-3px);
        }
    }
    .el-input-number__decrease {//下 按钮
        bottom: 2px;
        .el-icon-arrow-down:before {// 三角形
            content: '';
            display: inline-block;
            height: 0;
            width: 0;
            border-style: solid;
            border-width: 6px 4px 6px 4px;
            border-color: #999999 rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0);
            transform: translateY(3px);
        }
    }
}
相关推荐
子兮曰19 小时前
OpenClaw入门:从零开始搭建你的私有化AI助手
前端·架构·github
吴仰晖19 小时前
使用github copliot chat的源码学习之Chromium Compositor
前端
1024小神19 小时前
github发布pages的几种状态记录
前端
不像程序员的程序媛21 小时前
Nginx日志切分
服务器·前端·nginx
北原_春希21 小时前
如何在Vue3项目中引入并使用Echarts图表
前端·javascript·echarts
JY-HPS21 小时前
echarts天气折线图
javascript·vue.js·echarts
尽意啊21 小时前
echarts树图动态添加子节点
前端·javascript·echarts
吃面必吃蒜21 小时前
echarts 极坐标柱状图 如何定义柱子颜色
前端·javascript·echarts
O_oStayPositive21 小时前
Vue3使用ECharts
前端·javascript·echarts
竹秋…21 小时前
echarts自定义tooltip中的内容
前端·javascript·echarts