Bootstrap

el-input中的el-input__suffix行高问题

el-input中的el-input__suffix样式问题

在使用el-element开发时,使用到了el-input组件,添加了clearable属性,由于业务要求更改了样式,但问题出来了,el-input默认的高度是40px,我这里改成了32px,外表看起来没啥问题,但将光标移到el-input上面并输入一些内容,出现el-input__suffix图标,会发现它的行高有点偏下。
在这里插入图片描述
el-input在这里的高度是32px,我希望el-input__suffix图标的行高也是32px,这样看起来就要对齐一些。可是从控制台定位不到这个元素,因为鼠标一移开,它就消失。还好,这类图标通常是用 i 标签包裹着,那么可以这样:

::v-deep .el-input__suffix i {
    line-height: 32px;
}

搞定行高问题。

;