如何修改element ui的input的focus的边框线css

要在Element UI的Input组件上自定义聚焦时的边框样式，你需要覆盖默认的:focus pseudoclass样式。通常，Element UI会使用`.el-input__inner:focus`这个类来选中输入框的内边内容部分。你可以通过在项目的CSS文件、SCSS/Sass或者Vue组件内的<style>标签内添加新的规则来实现这一点。

例如，在全局CSS中：

.el-input__inner:focus {
  border-color: /* 自定义颜色 */;
  outline: none; /* 可能需要移除默认轮廓 */
}

如果你只想针对某个特定的Input元素修改，可以在Vue组件里这样写：

<template>
  <el-input
    v-bind:class="{ customFocus: isFocused }"
    ref="inputRef"
  ></el-input>
</template>

<script>
export default {
  data() {
    return {
      isFocused: false,
    };
  },
  methods: {
    onFocus() {
      this.isFocused = true;
    },
    onBlur() {
      this.isFocused = false;
    },
  },
  mounted() {
    this.$refs.inputRef.focus();
  },
  computed: {
    inputStyle() {
      return { 'border-color': this.isFocused ? 'your-custom-color' : '' };
    }
  },
};
</script>

<style scoped>
.el-input__inner.customFocus {
  border-color: /* 自定义颜色 */;
}
</style>

在这个例子中，当你调用focus方法时，`isFocused`会被设置为true，并应用自定义的聚焦样式。