html部分:
<el-input class="input-form" type="text" ref="username" placeholder="请输入用户名"></el-input>
css部分:
<style scoped lang="scss">
.inputForm {
width: 100%;
:deep(.el-input__wrapper) {
padding-left: 0px 10px 0px;
background: linear-gradient(180deg, rgba(6, 52, 88, 0.9) 0%, rgba(7, 96, 155, 0.9) 100%);
border-radius: 8px 0 0 0;
/* 边框颜色 */
border: 1px solid rgba(0, 221, 255, 0.5);
box-shadow: 0 0 0px rgba(0, 221, 255, 0.5);
}
:deep(.el-input__inner) {
padding-left: 5px;
padding-right: 0px;
color: #fff;
border-color: rgba(0, 221, 255, 0.5);
&::placeholder {
color: #fff; /* placeholder文字颜色 */
}
&:focus {
outline: none; /* 移除默认的焦点轮廓 */
/* 可选:阴影效果 */
box-shadow: 0 0 5px rgba(0, 221, 255, 0.5);
}
}
}
</style>