<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>
Modify the style of element ui input box
Guess you like
Origin blog.csdn.net/weixin_53474595/article/details/129464800
Ranking