自定义 el-select 和 el-input 样式

在Vue.js中，你可以通过自定义样式来修改el-select和el-input的默认样式。以下是一个简单的例子，展示如何自定义这两个Element UI组件的样式：

<template>
  <div id="app">
    <el-select class="custom-select">
      <el-option value="1">选项1</el-option>
      <el-option value="2">选项2</el-option>
    </el-select>
 
    <el-input class="custom-input"></el-input>
  </div>
</template>
 
<script>
export default {
  name: 'App',
};
</script>
 
<style>
/* 自定义 el-select 样式 */
.custom-select {
  background-color: #f0f0f0; /* 背景色 */
  border-color: #ccc; /* 边框色 */
  border-radius: 4px; /* 边框圆角 */
  /* 其他样式 */
}
 
/* 自定义 el-input 样式 */
.custom-input {
  background-color: #e0e0e0; /* 输入框背景色 */
  border-color: #bbb; /* 输入框边框色 */
  border-radius: 4px; /* 输入框圆角 */
  /* 其他样式 */
}
</style>

在这个例子中，.custom-select和.custom-input分别为el-select和el-input定义了新的样式。你可以根据需要添加更多的CSS属性来自定义这些组件的外观。