修改elementui组件el-input样式
效果展示:
鼠标移入后效果:
<el-inputplaceholder="搜索抖音昵称"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;}}