(css)el-tag标签,el-select多选框,el-cascader级联选框自定义样式
在Vue.js中使用Element UI库时,可以通过CSS覆盖默认样式来自定义el-tag
标签、el-select
多选框和el-cascader
级联选择框的样式。以下是一个简单的例子,展示如何自定义这些组件的一些基本样式:
/* 自定义tag标签的背景色和边距 */
.el-tag {
background-color: #f5f5f5;
margin: 5px;
}
/* 自定义select多选框的宽度和文本对齐 */
.el-select {
width: 200px;
text-align: left;
}
/* 自定义select多选框下拉选项的背景色和文本颜色 */
.el-select-dropdown__item {
background-color: #f5f5f5;
color: #333;
}
/* 自定义cascader级联选框的宽度和分隔符颜色 */
.el-cascader {
width: 300px;
}
.el-cascader__label {
color: #409EFF; /* 默认的蓝色 */
}
.el-icon-arrow-right:before {
color: #333; /* 分隔符颜色 */
}
将上述CSS代码添加到你的Vue项目的全局样式文件中或者相应的单文件组件<style>
标签内,就可以实现对这些Element UI组件样式的自定义。
评论已关闭