element日期选择器el-date-picker样式图文详解

<el-date-picker
	type="date"
	v-model="valueStart"
	value-format="yyyy-MM-dd"
	placeholder="开始时间" >
 </el-date-picker>

::v-deep .el-input__inner {
	  background-color: transparent !important;
	  border-color:#80ffff;
	  box-shadow: 1px 1px 5px 1px  RGB(128,255,255,0.8) inset;
	  height: 30px;
	}

::v-deep .el-input__icon {
	    line-height: 30px;
	}

<el-date-picker
	popper-class="elDatePicker"
	type="date"
	v-model="valueStart"
	placeholder="开始时间">
</el-date-picker>

.elDatePicker.el-picker-panel {
  color: #fff;//设置当前面板的月份的字体为白色，记为1
  background: #002450;//定义整体面板的颜色
  border: 1px solid #1384b4;//定义整体面板的轮廓
  .el-picker-panel__icon-btn {//设置年份月份调节按钮颜色，记为2
    color: #ffffff;
   }
  .el-date-picker__header-label{//设置年月显示颜色，记为3
  	color: #ffffff;
  }
  .el-date-table th {//设置星期颜色，记为4
      color:#ffffff;
  }
  
}

::v-deep .el-input__inner {
	  background-color: transparent !important;
	  border-color:#80ffff;
	  box-shadow: 1px 1px 5px 1px  RGB(128,255,255,0.8) inset;
	  height: 30px;
	  color:#ffffff;//字体为白色
	}

	::v-deep .el-date-editor.el-input.el-input--prefix.el-input--suffix.el-date-editor--date{
		
	 input{//输入框，想当于.el-input__inner
			background-color: transparent !important;
			border-color:#80ffff;
			box-shadow: 1px 1px 5px 1px  RGB(128,255,255,0.8) inset;
			color:#ffffff;
			height: 30px;	
		  }
	.el-input__icon {//日历图标
			    line-height: 30px;
			}	
	}