怎么改变elementplus 里的input number 上下按钮点击后的边框

Element Plus 的 InputNumber 组件默认的样式是基于 Vue 自身和 Element UI 设计的，如果你想修改输入框上下箭头按钮点击后的边框效果，你需要自定义一些 CSS 规则。

首先，你可以尝试覆盖默认的 `el-input__icon` 类，这个类通常包含了输入框的图标元素。例如，你可以添加一个新的 `.custom-number-button` 类，并针对它设置样式：

.custom-number-button {
  /* 这里可以设置按钮的边框 */
  border: 1px solid your-color; /* 可以替换为你喜欢的颜色 */
  background-color: transparent; /* 如果希望按钮背景透明 */
  cursor: pointer;
}

/* 或者如果你只想在鼠标悬停或点击时改变边框颜色 */
.custom-number-button:hover,
.custom-number-button:focus {
  border-color: your-hover-color; /* 更改鼠标悬停时的边框颜色 */
}

然后，在你的 Vue 元素上应用这个新类：

<template>
  <el-input-number
    v-model="value"
    class="custom-number-button"
    :controls="customControls" <!-- 假设 customControls 是一个对象，包含你要自定义的部分 -->
  ></el-input-number>
</template>

<script>
export default {
  // ...
  computed: {
    customControls() {
      return {
        prefixIconClass: 'custom-number-prefix', // 指定前缀图标类
        suffixIconClass: 'custom-number-suffix', // 指定后缀图标类
      };
    },
  },
};
</script>

确保在`.custom-number-prefix` 和 `.custom-number-suffix` 类中也相应地应用你的CSS规则。