vue3修改el-input相关样式

左边是没处理的默认样式，作个对比：

代码如下:

<template>
	<div class="wrap">
		<el-input v-model="iptVal" style="width: 200px; height: 30px; margin-right: 10px"></el-input>
		<el-input v-model="iptVal" class="ipt" placeholder="请输入">
			<template #prefix> 单号: </template>
			<template #suffix> 更多 </template>
		</el-input>
	</div>
</template>

<script setup>
import {  ref } from 'vue'
const iptVal = ref()
</script>

<style scoped lang="scss">
.wrap {

	.ipt {
		width: 200px;
		height: 30px;
	}
	:deep(.ipt .el-input__wrapper) {
		box-shadow: none; //去掉el-input边框
		background: none; //去掉默认背景
		border: 1px solid #008c8c;
		caret-color: red; //输入框聚焦光标颜色
		&.is-focus {
			border: 1px solid red; //输入框聚焦样式
		}
		&:hover {
			background: #ffffff; //鼠标移入输入框时输入框样式
		}
	}

	:deep(.ipt .el-input__inner) {
		color: green; //设置输入框内容文字颜色
		&::placeholder {
			color: red; //修改输入框提示语文字颜色(::placeholder)
		}
	}
}
</style>