在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;

}

```

第一次在博客上面发布文章，如果有不对的地方请各位大佬支出 ！！！