ElementUI 去掉el-select下拉框的小三角图案

作者：System 时间：2024年08月27日分类：所有,elementui 字数：609

在ElementUI中，el-select组件的下拉小三角图案是通过伪元素::after添加的。如果你想去掉这个小三角图案，可以通过CSS覆盖默认样式来实现。

以下是一个简单的CSS样式，用于去掉el-select下拉框的小三角图案：




.el-select .el-input__suffix .el-input__suffix-inner {
  display: none;
}

你需要确保这段CSS样式的优先级高于ElementUI的默认样式。你可以在全局样式文件中添加这段代码，或者在组件内的<style>标签中使用scoped属性（如果使用Vue.js）。

如果你只想针对某个特定的el-select去掉小三角，可以为该元素添加一个特定的类名，并针对该类名写CSS样式：




<el-select class="no-arrow">
  <!-- options -->
</el-select>




.no-arrow .el-input__suffix .el-input__suffix-inner {
  display: none;
}

请注意，这种方法可能会影响到其他依赖小三角图案的ElementUI组件的正常显示，因此请根据实际情况谨慎使用。