修改element组件的默认样式

仅以此文章对自己的前端学习工作进行一个记录。

在全局样式表中:

.el-table .cell{

font-size:13px;/*表格文字样式*/

}

.el-input__inner{

border:1px solid #fff !important;/*输入框*/

  height:20px !important;

  line-height:20px !important;

  border-radius:0 !important;/*取消边框圆角*/

}

.el-input .el-input__inner:focus, .el-input.is-focus .el-input__inner{

border:1px solid #fff !important;/*表单获得焦点后输入框边框*/

}

.el-range-editor.is-active, .el-range-editor.is-active:hover{

border:1px solid #fff !important;/*表单时间选项框边框*/

}

/*.el-radio__input.is-checked .el-radio__inner{

border-color: #fff !important;!*表单选项颜色*!

background: #fff !important;

}

.el-cascader-node.is-active, .el-cascader-node.is-selectable.in-checked-path {

color: #1ab394;!*级联选择器选中文字颜色*!

}*/

/*.el-select-dropdown__item.selected{

color: #fff;!*下拉选项选中文字颜色*!

}*/

.el-checkbox__input.is-checked+.el-checkbox__label{

color:#fff !important;/*复选框选中文字颜色*/

}

.el-checkbox__input.is-checked .el-checkbox__inner{

border-color:#fff !important;/*复选框选中符号颜色*/

  background:#fff !important;

}

.el-checkbox__input.is-indeterminate .el-checkbox__inner{

border-color:#fff !important;/*复选框全选符号颜色*/

  background:#fff !important;

}

.el-checkbox__inner:hover{

border-color:#fff !important;/*复选框鼠标经过边框颜色*/

}

.el-form-item__label{

color:#676a6c;/*表单label文字样式*/

  font-size:14px;

}

.el-table--striped .el-table__body tr.el-table__row--striped td{

background:#f9f9f9 !important; /*表格斑马条纹颜色*/

}

.el-message--error{

background-color:#fff !important;/*错误提示框背景色*/

}

.el-message--error .el-message__content{

color:#fff !important;/*错误提示框文字样式*/

}

.el-icon-error:before{

color:#fff;/*错误提示框图标颜色*/

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。