antdVue 重置select和input的樣式 去掉藍色換成灰色
阿新 • • 發佈:2022-05-27
程式碼實現:
<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>