改变原有的element-ui样式

675 阅读2分钟

前面需要添加 ::v-deep

/* 时间框 */
.el-range-editor.is-active,
.el-range-editor.is-active:hover{
	border-color: #e6a23c;
}
/* 今天日期的颜色 */
.el-date-table td.today span{
	color: #e6a23c;
}
/* 开始日期和结束日期的颜色 */
.el-date-table td.end-date span, 
.el-date-table td.start-date span{
	background-color: #e6a23c;
}
/* 当前选择的单个 */
.el-date-table td.current:not(.disabled) span{
	background-color: #e6a23c;
}
/* 鼠标经过每个日期的颜色 */
.el-date-table td.available:hover{
	color:#e6a23c;
}
.el-button--text,
.el-button--text:focus,
.el-button--text:hover{
	color:#e6a23c;
}

.el-button--warning.is-plain {
	background-color: #fff;
	color: #e6a23c;
}
.el-button.is-plain:focus, 
.el-button.is-plain:hover {
    background: #FFF;
    border-color: #e6a23c;
    color: #e6a23c;
}

/* 表单基线对齐 */
.el-form-item__content .el-input-group{
	vertical-align: baseline;
}
/* // 输入框 */
.el-input__inner:focus{
	border-color: #e6a23c;
}
/* 下拉框 */
.el-select .el-input.is-focus .el-input__inner{
	border-color: #e6a23c;
}
/* 下拉框选中 */
.el-select-dropdown__item.selected{
	color: #e6a23c;
}

/*  改变分页的高亮颜色 */
.el-pagination.is-background .el-pager li:not(.disabled).active{
	background-color: #e6a23c;
}
/* 选中后鼠标移入 */
.el-pagination.is-background .el-pager li:not(.disabled).active:hover{
	color: #fff;
}
/* 移入切换分页颜色 */
.el-pagination.is-background .el-pager li:hover{
	color: #e6a23c;
}
.el-pagination.is-background .el-pager li:not(.disabled):hover{
	color: #e6a23c;
}
/* 分页框 */
.el-pagination .el-input__inner:hover{
	border-color: #e6a23c;
}
.el-pagination .el-input__inner:focus{
	border-color: #e6a23c;
}
.el-pagination__sizes .el-input .el-input__inner:hover {
    border-color: #e6a23c;
}

/* 分页跳的输入框移入 */
.el-pagination__editor.el-input .el-input__inner:hover{
	border-color: #e6a23c;
}
.el-pagination__editor.el-input .el-input__inner .is-active{
	border-color: #e6a23c;
}

/* 去掉必选前面的星号 */
.el-form-item__label:before{
	display: none;
}
/* 改变输入框得到焦点时的颜色 */
.el-input__inner:focus{
	border-color: #e6a23c;
}
/* 改变文本域框得到焦点时的颜色 */
.el-textarea__inner:focus{
	border-color: #e6a23c;
}
/* 下拉框得到焦点的颜色 */
.el-select .el-input.is-focus .el-input__inner{
	border-color: #e6a23c;
}
/* 下拉框选中 */
.el-select-dropdown__item.selected{
	color: #e6a23c;
}

/* 改变复选框选中的颜色 */
.el-checkbox__inner:hover{
	border-color: #e6a23c;
}
.el-checkbox__input.is-checked+.el-checkbox__label{
	color: #e6a23c;
}
.el-checkbox__input.is-checked .el-checkbox__inner, 
.el-checkbox__input.is-indeterminate .el-checkbox__inner{
	background-color: #e6a23c;
	border-color: #e6a23c;
}
.el-checkbox__input.is-focus .el-checkbox__inner{
	border-color: #d9d9d9;
}
/* 改变单选框的颜色 */
.el-radio__inner:hover{
	border-color: #e6a23c;
}
.el-radio__input.is-checked .el-radio__inner{
	border-color: #e6a23c;
	background-color: #e6a23c;
}
.el-radio__input.is-checked+.el-radio__label{
	color: #e6a23c;
}
/* 下拉框 */
.el-select .el-input__inner:focus{
	border-color: #e6a23c;
}

/* 级联选择器 */
/* 得到焦点的边框颜色 */
.el-cascader .el-input .el-input__inner:focus,
 .el-cascader .el-input.is-focus .el-input__inner{
	border-color: #e6a23c;
}
/* 选中项的颜色 */
.el-cascader-node.in-active-path, 
.el-cascader-node.is-active, 
.el-cascader-node.is-selectable.in-checked-path{
	color: #e6a23c;
}


/* 上传框 */
.el-upload-list__item.is-success .el-upload-list__item-name:focus,
.el-upload-list__item.is-success .el-upload-list__item-name:hover{
	color: #e6a23c;
}
.el-upload:focus .el-upload-dragger{
	border-color: #d9d9d9;
}