antdVue 重置select和input的样式 去掉蓝色换成灰色

 

代码实现:

<template>
  <div>
    <a-select mode="tags" style="width: 200px" placeholder="请选择" @change="handleChange">
      <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
        {{ (i + 9).toString(36) + i }}
      </a-select-option>
    </a-select>
    <a-input placeholder="请输入"  style="width: 200px"/>
  </div>
</template>
<script>
export default {
  name: 'test',
  methods:{
     handleChange(value) {
          console.log(`selected ${value}`);
        },
  }
}
</script>
<style>
  /* 重置selectl开始 */
.ant-select-dropdown-menu-item-active,
.ant-select-dropdown-menu-item:hover {
  background-color: #edf2f5;
}
.ant-select-focused .ant-select-selection,
.ant-select-selection:focus,
.ant-select-selection:active {
  border-color: #cccccc;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0);
}

.ant-select-selection:hover {
  border-color: #cccccc;
}
 /* 重置selectl结束 */
/* 重置input开始 */
.ant-input,.ant-input:focus, 
.ant-input:hover, 
.ant-input:active, 
.ant-input-affix-wrapper:hover .ant-input:not(.ant-input-disabled)
{
  border-color: #cccccc;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0);
}
/* 重置input结束 */
</style>

  

 

posted @ 2022-05-27 11:33  世界我快乐  阅读(1876)  评论(0编辑  收藏  举报