1.找到下拉框的类名,写一个全局的样式。 2.通过/deep/来修改.el-select-dropdown__item的样式内容 3.通过popper-class设置的类名添加样式 以上几种方式中,第二种和第三种是无法生效的,而第一种形式虽然可以,但是会造成样式污染,在打包上传到服务器的时候,其他地方的样式可能会因此发生改变。 二:问题分析 上...
dropdown__item:hover{color:#409eff;}//修改的是下拉框选项内容上方的尖角/deep/.el-popper.popper__arrow,.el-popper.popper__arrow::after{display:none;}}
#08164d; margin: 0px; border:0px; border-radius: 0px; } //修改单个的选项的样式 /deep/ .el-select-dropdown__item{ background-color: transparent; color:#fff; } //item选项的hover样式 /deep/ .el-select-dropdown__item.hover, /deep/ .el-select-dropdown__item:hover{ color:#409eff;...
} :deep(.el-select) {--el-select-border-color-hover: #1e2230;--el-select-disabled-border: #1e2230;--el-select-font-size:var(--el-font-size-base);--el-select-close-hover-color: #1e2230;--el-select-input-color: #1e2230;--el-select-multiple-input-color: #1e2230;--el-select-in...
el-select-dropdown__item:hover { background-color: #baf; } </style> </head> 效果图如下 但是在index.html文件里面修改样式会造成全局样式污染,假设我只想把这个页面的下拉框的样式修改了,别的页面的下拉框样式不修改,这种方式显然不太好,当然如果是所有的下拉框都统一修改样式的话,这种方式倒是挺好的,...
在Vue项目中使用Element UI库时,el-select组件是一个常用的下拉选择框组件。为了满足特定的设计需求,经常需要对el-select进行自定义样式设置。下面我将详细介绍如何自定义el-select的样式。1. 理解el-select组件的基本用法和默认样式 el-select组件提供了一个下拉选择框,用户可以从下拉列表中选择一个或多个选项。其默...
既然加入到el-select里面了,我们就可以使用css选择器找到对应层级去设置对应样式了,依然可以实现上图中的效果 <stylelang="less"scoped>.el-select{.el-select-dropdown{.el-scrollbar{.el-select-dropdown__wrap{.el-scrollbar__view{.el-select-dropdown__item:hover{background-color:#baf; ...
//下拉框样式 .companyType { width: 900px; max-height: 600px; overflow: auto; padding: 10px 20px; background: #FFFFFF; .type-item { &:hover { background: #EBF3FF; } } .input {margin-bottom: 10px; ::v-deep { .el-input__inner { ...
网上找了一溜,都是扯淡,样式也没个 自己动手吧,先把样式搞定 popper-class="xx-option"所有单选框都用 :after和:before类 + 定位 实现 样式逻辑复杂点,再加上:hover、:active伪类,看不惯还要封装 就出来了 .xx-option { .el-select-dropdown__list .el-select-dropdown__item { ...
}//item选项的hover样式::v-deep .el-select-dropdown__item.hover, ::v-deep .el-select-dropdown__item:hover{color:rgb(21,94,38);background:rgba(87,133,87,0.3); }//修改的是下拉框选项内容上方的尖角::v-deep .el-popper .popper__arrow, .el-popper .popper__arrow::after{display: none...