1. 程式人生 > 其它 >antdVue 重置select和input的樣式 去掉藍色換成灰色

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>