石家庄公司网站建设,桂林象鼻山是什么地貌,成都微信微网站建设,海南 网站制作输入框样式、选择器样式和下拉框样式修改 1、输入框和选择器的样式修改#xff1a;2、下拉弹框样式A. 选择器的下拉弹框样式修改B. 时间选择器的下拉弹框样式修改C. vue-treeselect树形下拉框样式 1、输入框和选择器的样式修改#xff1a; 写在style中不能加scoped#xff0… 输入框样式、选择器样式和下拉框样式修改 1、输入框和选择器的样式修改2、下拉弹框样式A. 选择器的下拉弹框样式修改B. 时间选择器的下拉弹框样式修改C. vue-treeselect树形下拉框样式 1、输入框和选择器的样式修改 写在style中不能加scoped所以可以在最外层的div加一个专属名再写样式:
.my-dialog {// 输入框的背景.el-input .el-input__inner,.el-range-editor--mini.el-input__inner,.el-range-editor--mini .el-range-input,.el-select-dropdown__item,.el-select-dropdown__item,.el-picker-panel .el-date-picker,.vue-treeselect__menu,.vue-treeselect__option,.bonc-tree-select .vue-treeselect__single-value {background-color: #1d5293 !important;border-color: #1664b6 !important;color: #fff;}
}2、下拉弹框样式
A. 选择器的下拉弹框样式修改
el-select下拉项的的容器是div#app之外的所以在scoped作用域内使用或/deep/修改样式无效要想 官网如是说加:popper-append-to-bodyfalse 代码像普通样子写 el-select v-modelvalue placeholder请选择 :popper-append-to-bodyfalseel-optionv-foritem in options:keyitem.value:labelitem.label:valueitem.value/el-option/el-select.el-select-dropdown__item,.el-select-dropdown__item,{background-color: #1d5293 !important;border-color: #1664b6 !important;color: #fff;}.el-select-dropdown__item.hover,.el-select-dropdown__item:hover {background-color: #203f64 !important;}B. 时间选择器的下拉弹框样式修改
el-date-picker是将元素直接挂载到页面的中而非自身元素下所以使用/deep/穿透也是无法定位到元素的要想做到修改样式 官网说需要加 代码
el-date-picker:popper-append-to-bodyfalsepopper-classdatepopper...
/同样不能写在scoped里时间选择器和时间范围选择器都有啦
.datepopper {background: #1d5293 !important;border-color: #1764b6 !important;.el-date-picker__header-label,.el-year-table td .cell,.el-date-range-picker__content .el-date-range-picker__header div,.el-date-table th,.el-date-table td span {color: #fff !important;}.el-date-table td.today span {color: #1890ff !important;}.el-date-table td.in-range div {background-color: #1d3b69 !important;}
}C. vue-treeselect树形下拉框样式 加 :popper-append-to-bodyfalse.vue-treeselect__option.hover,.vue-treeselect__option:hover {background-color: #203f64 !important;}.vue-treeselect__menu-container {background: #1d5293 !important;border-color: #1764b6 !important;color: #fff;}
