antdv select 样式改变

vue版ant design select 样式调整

布局

<div class="select-wrap">
  <a-select>
    <a-select-option></a-select-option>
  </a-select>
</div>

外部的选择框和展示框

# 局部样式
.select-wrap /deep/ .ant-select {
  width: 100%;
  color: #06B0FE;
  font-size: 22px;
  font-weight: 400;
}
.select-wrap /deep/ .ant-select-selection--single {
  background: rgba(4, 3, 36, .5);
  border: 1px solid #06B0FE;
  width: 100%;
  height: 100%;
}
.select-wrap /deep/ .ant-select-selection__rendered{
  line-height: 36px;
}
.select-wrap /deep/ .ant-select-arrow {
  color: #06B0FE;
  font-size: 14px;
  font-weight: 600;
}

option面板

option面板是一个全局的组件，他在body标签下，与#app同级

/* 全局修改下拉框的样式 */
.ant-select-dropdown {
  /* color: rgba(255, 255, 255, .7); */
  /* background-color: #040324;
  background: #040324; */
  /* font-size: 22px; */
  /* border: 1px solid #06B0FE; */
}
.ant-select-dropdown-menu {
  background-color: #040324;
  background: #040324;
  border: 1px solid #06B0FE;
  font-size: 22px;
}
.ant-select-dropdown-menu-item {
  padding: 0px 12px !important;
  height: 60px !important;
  line-height: 60px !important;
  font-size: 22px !important;
  color: rgba(255, 255, 255, .7) !important;
}
.ant-select-dropdown-menu-item:hover {
  background: rgba(6, 176, 254, .2) !important;
  color: #06B0FE !important;
}
.ant-select-dropdown-menu-item-selected {
  background: rgba(6, 176, 254, .2) !important;
  color: #06B0FE !important;
}
.ant-select-dropdown-menu-item-active {
  background: rgba(6, 176, 254, .2) !important;
  color: #06B0FE !important;
}

效果

input中placeholder样式修改

::-webkit-input-placeholder {
  color: #97adbf;
}
::-moz-input-placeholder {
  color: #97adbf;
}
::-ms-input-placeholder {
  color: #97adbf;
}
// date-c代表外部的class
.date-c ::placeholder{
	color:#97adbf;
}

滚动条样式修改

// 进度条
::-webkit-scrollbar {
  width: 6px;
  height: 1px;
}
// 滑块部分
::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.1);
}
// 轨道部分
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
  background: #0d1331;
  border-radius: 3px;
}