赞
踩
html:
此处placeholder的文字颜色不易修改,先自定义2种不同文字颜色样式css:
- /deep/ .colorchange .el-input__inner::-webkit-input-placeholder{
-
- color: #c7fbeb; // 初始化的文字颜色
-
- }
-
- /deep/ .searchchange .el-input__inner::-webkit-input-placeholder{
-
- color: #333; // 获取焦点时的文字颜色
-
- }
js:
修改option需要在标签 el-select 上添加 :teleported="false",才能修改的了
- <el-select :teleported="false" style="width: 300px" v-model="person.weekActive" placeholder="请选择" @change="changeWeek" >
- <el-option v-for="item in person.weekList" :key="item.value" :label="item.label" :value="item.value+''" />
- </el-select>
样式
- // 选项样式
- :deep(.el-popper) {
- &.is-light {
- background: #18191C !important;
- border: none;
- }
- .el-select-dropdown__item {
- color: #848484;
- &:hover {
- background-color: transparent !important;
- color: #00B386 !important;
- }
- &.hover {
- background-color: transparent !important;
- color: #00B386 !important;
- }
- }
- .el-select-dropdown__list .selected{
- color: #fff !important;
- }
- .el-popper__arrow {
- display: none;
- }
- }
-
- // 外框样式
- :deep(.el-select) {
- .el-input {
- &.is-focus {
- .el-input__wrapper {
- box-shadow: 0 0 0 1px transparent inset !important;
- }
- }
- }
- .el-input__wrapper {
- box-shadow: 0 0 0 1px transparent inset;
- background-color: rgba(146, 146, 146, 0.08);
-
- &.is-focus {
- box-shadow: 0 0 0 1px transparent inset !important;
- }
- }
- .el-input__inner {
- color: #C2C8CC;
- }
- }
希望我的愚见能够帮助你哦~,若有不对的地方,还望指出,你们有更好的解决方法,欢迎大家在评论区下方留言支持,大家一起相互学习参考呀~
赞
踩
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。