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);
        }
    }
}
相关推荐
格子软件12 小时前
2026年GEO优化系统源码级状态机与多模型调度拆解
java·前端·vue.js·人工智能·vue·geo
HUMHSX13 小时前
Vue 项目启动全流程解析:从入口文件到全局指令注册与页面渲染
前端·javascript·vue.js
有颜有货13 小时前
PMC生产排产的4种算法,一次讲清
java·服务器·前端
小虎牙00713 小时前
Android kotlin图片库Coil源码详解
android·前端
随风一样自由14 小时前
【前端领域】前端开发核心应用场景与落地实践
前端·前端框架
an3174214 小时前
弹窗数据流设计的两种高阶架构实践
前端·vue.js·架构
谢尔登14 小时前
【React】 状态管理方案
前端·react.js·前端框架
用户21366100357214 小时前
Vue商品详情与放大镜组件
前端·javascript
半个落月15 小时前
从Tapas小Demo理清localStorage、事件与this
前端·javascript
李明卫杭州15 小时前
Vue2 中 v-model 处理不同数据结构的技巧
前端·javascript·vue.js