antdVue 重置select和input的样式 去掉蓝色换成灰色
![](https://img2022.cnblogs.com/blog/961783/202205/961783-20220527113130752-1136761779.png)
代码实现:
<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>