修改el-select样式

要修改el-select下拉框的样式，可以采用以下几种方法。首先，可以通过找到下拉框的类名，然后写一个全局的样式来修改样式。其次，可以使用/deep/来修改.el-select-dropdown__item的样式内容。还可以通过popper-class设置的类名添加样式。\[1\]

在element-ui框架中，很多元素不能直接修改样式。如果需要切换select的option，并且每次切换时可以拿到对应城市的id，以发送网络请求展示不同数据，可以按照以下步骤进行解决。首先，将默认select标签通过:popper-append-to-body="false"放到app元素下级。然后，在change事件中可以拿到通过v-model绑定的value值，即当前选中项的值，这样就可以根据当前选中项的值去请求各项对应的数据了。\[2\]

需要注意的是，样式不能使用scoped，可以在style标签中添加以下样式来修改el-select的样式：

<style>
.elpopperbox {
  background-color: rgba(46, 163, 220, 0.26) !important;
  border: 1px solid #2893cc !important;
  border-radius: 0 !important;
}
.elpopperbox el-select-dropdown__item {
  color: #707070 !important;
}
.elpopperbox .popper__arrow::after {
  border-bottom-color: rgba(46, 163, 220, 0.26) !important;
}
.elpopperbox .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
  background-color: rgba(46, 163, 220, 0.5) !important;
}
.elpopperbox .el-select-dropdown__item.selected {
  color: #fff !important;
}
</style>

通过以上方法，你可以修改el-select的样式来满足你的需求。
#### 引用[.reference_title]
- *1* [el-select下拉框选项的样式修改(背景色、hover、字体等)](https://blog.csdn.net/qq_26695613/article/details/127870263)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [以el-select为例，说明element-ui中修改标签样式的方法](https://blog.csdn.net/qq_42724424/article/details/124348452)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [el-select修改样式](https://blog.csdn.net/zhao3756/article/details/130374773)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]