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);
        }
    }
}
相关推荐
IT_陈寒27 分钟前
Redis的DEL命令竟然没删掉数据?我踩的这个坑你得知道
前端·人工智能·后端
anOnion27 分钟前
构建无障碍组件之Menu and Menubar Pattern
前端·html·交互设计
JavaGuide35 分钟前
我用 Claude Code/ZCode+GLM-5.3 从零做了一款 Agent 游戏!
前端·后端
Eason_Lou40 分钟前
vue flow使用注意事项
前端·vue.js
小赵同学WoW2 小时前
1-2 TypeScript 中的 `any` 与 `unknown`
前端
six_2 小时前
C# 上位机(持续更新中)
前端·面试·c#
风雨_2 小时前
Git Worktree sourcetree完整使用指南
前端
半个落月2 小时前
React 组件通信进阶:useContext 与自定义 Hook 实战详解
前端·react.js
用户921080262862 小时前
ChatComposer 输入区改造:基于技能市场实现 Agent 输入框
前端
用户45989204565162 小时前
一套 KMP 多仓库版本治理工作流:用 Version Catalog + CI 把发版流水线自动化
前端·kotlin