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);
        }
    }
}
相关推荐
GIS之路13 分钟前
GIS 数据转换:使用 GDAL 将 TXT 转换为 Shp 数据
前端
多看书少吃饭21 分钟前
从Vue到Nuxt.js
前端·javascript·vue.js
前端一小卒31 分钟前
从 v5 到 v6:这次 Ant Design 升级真的香
前端·javascript
前端不太难2 小时前
《Vue 项目路由 + Layout 的最佳实践》
前端·javascript·vue.js
LYFlied2 小时前
【每日算法】 LeetCode 56. 合并区间
前端·算法·leetcode·面试·职场和发展
老华带你飞2 小时前
物流信息管理|基于springboot 物流信息管理系统(源码+数据库+文档)
数据库·vue.js·spring boot
想学后端的前端工程师2 小时前
【Vue3组合式API实战指南:告别Options API的烦恼】
前端·javascript·vue.js
否子戈2 小时前
WebCut前端视频编辑UI框架一周开源进度
前端·音视频开发·ui kit
昔人'3 小时前
`corepack` 安装pnpm
前端·pnpm·node·corepack
萌萌哒草头将军3 小时前
pnpm + monorepo 才是 AI 协同开发的最佳方案!🚀🚀🚀
前端·react.js·ai编程