修改element ui输入框的样式

<template>
  <div class="left_search_box">
    <el-input
      placeholder="请输入关键字"
      suffix-icon="el-icon-search"
      v-model="inputValue"
    >
    </el-input>
  </div>
</template>
<script>
export default {
  data() {
    return {
      inputValue: "",
    };
  },
};
</script>
<style scoped lang='scss'>
.left_search_box {
  width: 100%;
  box-sizing: border-box;
  padding: 30px;
  /deep/ .el-input {
    width: 95%;
    height: 40px;
    .el-input__inner {
      /* 使input框的背景变透明 */
      background-color: transparent;
      color: white;
      /* 使边框也变透明 */
      border-color: rgb(35, 79, 151);
      border-width: 2px;
      /* 给边框加阴影能够使其有立体感 */
      box-shadow: 2px 2px 0 0 rgba(0, 0, 0, 0.2);
      /* 改变获取焦点后的竖线颜色 */
      caret-color: #2a74e4;
      &::placeholder {
        color: white;
      }
    }
    .el-input__inner:hover {
      border-color: rgb(35, 79, 151);
    }
    .el-input__inner:focus {
      border-color: rgb(35, 79, 151);
    }
    .el-icon-search {
      color: #2a74e4;
      font-size: 16px;
    }
  }
}
</style>