修改elementui组件el-input样式
效果展示:
鼠标移入后效果:
<el-input
placeholder="搜索抖音昵称"
prefix-icon="el-icon-search"
v-model="search"
class="searchClass"
>
</el-input>
// 将elementui搜索框改为椭圆形
.lately_privateletter {
.searchClass {
border: 1px solid #c5c5c5;
border-radius: 20px;
background: #f4f4f4;
margin: 10px 0;
}
.searchClass .el-input-group__prepend {
border: none;
background-color: transparent;
padding: 0 10px 0 30px;
}
.searchClass .el-input-group__append {
border: none;
background-color: transparent;
}
.searchClass .el-input__inner {
height: 36px;
line-height: 36px;
border: none;
background-color: transparent;
}
.searchClass .el-icon-search {
font-size: 16px;
}
.searchClass .centerClass {
height: 100%;
line-height: 100%;
display: inline-block;
vertical-align: middle;
text-align: right;
}
.searchClass .line {
width: 1px;
height: 26px;
background-color: #c5c5c5;
margin-left: 14px;
}
.searchClass:hover {
border: 1px solid #d5e3e8;
background: #fff;
}
.searchClass:hover .line {
background-color: #d5e3e8;
}
.searchClass:hover .el-icon-search {
color: #409eff;
font-size: 16px;
}
}