免费下载简历模板网站,如何用手机建设一个网站,扁平化手机网站,h5响应式网站源码下载这样漂亮的页面#xff0c;搭配的却是一个白色风格的下拉框 #xff0c;这也过于刺眼。。。 调整后样式为#xff1a; 灯红酒绿总有人看着眼杂#xff0c;但将风格统一终究是上上选择。下面来处理这个问题。
分为两部分。
第一部分#xff1a;是修改触发框的样式
第二部…这样漂亮的页面搭配的却是一个白色风格的下拉框 这也过于刺眼。。。 调整后样式为 灯红酒绿总有人看着眼杂但将风格统一终究是上上选择。下面来处理这个问题。
分为两部分。
第一部分是修改触发框的样式
第二部分是修改弹出的popover的样式 1、修改触发框的样式将边框、背景颜色置为匹配的颜色 style langscss scoped::v-deep {.el-input__inner {background-color: transparent;border: 1px solid white;color: white;line-height: 28px;height: 28px;font-size: 12px;padding: 0 0 0 10px;}
}
/style 2、修改弹出的popover的样式。
给el-select添加popper-class 添加CSS样式修改对应的UI样式 style
.popperView.el-select-dropdown {border: 3px solid #343434;
}.popperView .el-select-dropdown__list {background-color: #222;
}/* 自定义选中的选项背景色 */
.popperView .el-select-dropdown__item.selected {background-color: rgba(2, 134, 240, 0.2);color: white;
}/* 自定义鼠标悬停的选项背景色 */
.popperView .el-select-dropdown__item:hover {background-color: #ecf5ff;
}.popperView .el-select-dropdown__item {background-color: transparent;:hover {background-color: rgba(2, 134, 240, 0.2);;color: white;}
}.el-popper[x-placement^top] .popper__arrow::after {border-top-color: #343434;
}.el-popper[x-placement^top] .popper__arrow {border-top-color: #343434;
}.el-popper[x-placement^bottom] .popper__arrow::after {border-bottom-color: #343434;
}.el-popper[x-placement^bottom] .popper__arrow {border-bottom-color: #343434;
}
/style
