Element表单el-input嵌入按钮样式修改

要修改Element UI中el-input组件内嵌按钮的样式，可以通过自定义CSS来覆盖默认样式。以下是一个例子，展示了如何通过CSS修改内嵌按钮的背景色和边框。

假设你想要修改el-input组件内的清除按钮的样式，可以使用以下CSS代码：

/* 修改清除按钮的背景色 */
.el-input__suffix .el-input__clear {
  background-color: blue;
}
 
/* 修改清除按钮的边框颜色 */
.el-input__suffix .el-input__clear:hover {
  border-color: blue;
}

在你的Vue组件中，确保你已经正确地引入了Element UI并使用了el-input组件。

<template>
  <el-input v-model="input" clearable></el-input>
</template>
 
<script>
export default {
  data() {
    return {
      input: ''
    };
  }
};
</script>
 
<style>
/* 在这里引入你的自定义CSS */
@import './input-button-styles.css';
</style>

在这个例子中，.el-input__suffix .el-input__clear选择器指向了Element UI中el-input组件内部的清除按钮，并为它设置了背景色和边框颜色。当鼠标悬停在按钮上时，:hover伪类用于改变边框颜色。确保将CSS代码放入一个单独的文件中，并在Vue组件的<style>标签中引入。