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);
        }
    }
}
相关推荐
中国lanwp几秒前
npm中@your-company:registry 和 registry 的区别
前端·npm·node.js
Bacon2 分钟前
Electron 应用商店:开箱即用工具集成方案
前端·github
行走的陀螺仪3 分钟前
uni-app + Vue3 实现折叠文本(超出省略 + 展开收起)
前端·javascript·css·uni-app·vue3
冴羽6 分钟前
JavaScript 异步循环踩坑指南
前端·javascript·node.js
jump6808 分钟前
commonjs 和 ES Module
前端
旧曲重听130 分钟前
前端需要掌握多少Node.js?
前端·node.js
Mr.Jessy30 分钟前
Web APIs 学习第四天:DOM事件进阶
开发语言·前端·javascript·学习·ecmascript
云枫晖33 分钟前
前端工程化实战:手把手教你构建项目脚手架
前端·前端工程化
醉方休35 分钟前
开发一个完整的Electron应用程序
前端·javascript·electron
故作春风41 分钟前
手把手实现一个前端 AI 编程助手:从 MCP 思想到 VS Code 插件实战
前端·人工智能