在vue项目开发中，我们会遇到使用select的多选框，并且需要clearble的清空选项来提升用户体验，但是在下来框的选项比较多的时候，会把下拉框给撑开，在这个时候点击左侧的空白部分也会触发删除按钮，删除所有的选项如下图所示：
点击鼠标所指的空白部分也会删除所有的选项
而用户所认知的应该是点击在 X 的图标位置才应该删除所有的选项。这是由于element 中select图标i高度所导致的。
```
.el-input__icon {
height: 100%;
width: 25px;
text-align: center;
line-height: 40px;
}
// 由于icon图标的高度设置成了100% 所以才会造成点击整个右侧空白部分都会删除所有的选项。
// 只需要修改特的样式就可以变成只能点击图标才能清空选项。
.el-input__icon {
height: 1rem;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
right: 0;
line-height: 0;
}
```
第一次在博客上面发布文章，如果有不对的地方请各位大佬支出 ！！！
