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);
}
}
}