当前位置: 首页>编程语言>正文

[ant-design-vue]修改a-date-picker日期选择器 及a-select下拉菜单 hover的颜色

修改a- select默认样式

[ant-design-vue]修改a-date-picker日期选择器 及a-select下拉菜单 hover的颜色,第1张
下拉菜单
.ant-select-open:hover{
  background-color: #000;
}
.ant-select-dropdown-menu-item:hover:not(.ant-select-dropdown-menu-item-disabled) {
  background-color: #000;
}
.ant-select-dropdown-menu-item-active:hover{
  background-color: #4DFFFF!important;
  color:#000
}


.ant-select-arrow .ant-select-arrow-icon{
  color:#fff;
}

.ant-select-dropdown-menu-item-active:not(.ant-select-dropdown-menu-item-disabled) {
  background-color: #000;
}
.ant-select-dropdown-menu-item-selected{
  background-color: #000;
}

修改a-date-picker默认样式

[ant-design-vue]修改a-date-picker日期选择器 及a-select下拉菜单 hover的颜色,第2张
a-date-picker
// 修改默认datepicker样式
.ant-calendar-date:hover {
  background: #4DFFFF;
  color:#000!important;
}
.ant-calendar-range .ant-calendar-in-range-cell::before {
  background: #4DFFFF;
  color:#000
}
.ant-calendar-range .ant-calendar-in-range-cell::before {
  background: #4DFFFF;
  color: #000;
}
.ant-calendar-in-range-cell .ant-calendar-date{
  color:#000;

}

//当天日期的样式
.ant-calendar-today .ant-calendar-date {
  color: #919191;
  font-weight: bold;
  border-color: #ffffff;
}
//选择时间区段,的两端的日期
.ant-calendar-range .ant-calendar-selected-start-date .ant-calendar-date,
.ant-calendar-range .ant-calendar-selected-end-date .ant-calendar-date {
  color: #000;
  background: #4DFFFF;
  border: 1px solid transparent;
}

//修改清空按钮样式
.ant-calendar-picker-clear:hover {
  color: rgb(255 255 255);
}
.ant-calendar-picker-clear {
  color: rgba(255, 255, 255, 0.45);
}
.ant-calendar-picker-icon {
  color: #fff;
}

https://www.xamrdz.com/lan/5kx1994673.html

相关文章: