Ant design Vue3 的 select 组件鼠标移入时 css样式 怎么改?

Question

<a-select> 省略</a-select>
//  更改border有效
  :deep(.ant-select-selector){
    background-color:rgba(255, 255, 255, 0)!important;
    border: 0;
  }
// 但是鼠标移入时,   又出现 border,   还出现了 box-shadow
 怎么去除这个样式, 

官网  (https://www.antdv.com/components/overview-cn)

Answer 1

.ant-select :deep(.ant-select-selector) {
  background-color: rgba(255, 255, 255, 0) !important;
  border: 0 !important;
}
.ant-select-focused.ant-select :deep(.ant-select-selector) {
  background-color: rgba(255, 255, 255, 0) !important;
  border: 0 !important;
  box-shadow: none !important;
}

Answer 2

.ant-select:not(.ant-select-disabled):hover .ant-select-selector {
  /* border-color: #40a9ff; */
  border-color: #d9d9d9;
  border-right-width: 1px !important;
  /* box-shadow: none; */
}

Answer 3

:deep(.ant-select-selector) {
    background-color: rgba(255, 255, 255, 0)!important;
    border: none !important;
    box-shadow: none !important;
}

Answer 4

没太理解，有这个出现什么出现什么的截图没。

你说的这个效果可能是悬停样式，你修改成自己想要的悬停样式然后覆盖掉试下。

Answer 5

那个border出现在他的父元素上，你尝试改下ant-select 的样式