一、Select選擇器的原生樣式的本來面貌
這是原生的沒有經過任何加工的面貌:
這是沒有經過任何加工的選中時出現下拉框的面貌:
這是沒有經過加工的懸浮下拉菜單的面貌:
這是沒有經過加工的選中時的面貌:
二、如何修改Select選擇器,將她的樣子變得好看或者如你所愿
這是原生的copy的代碼:
<template><el-select v-model="value" class="m-2" placeholder="請選擇" size="large"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"/></el-select><el-select v-model="value" class="m-2" placeholder="請選擇"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"/></el-select><el-select v-model="value" class="m-2" placeholder="請選擇" size="small"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"/></el-select>
</template>
?想要修改她,就必須了解她都有哪一層的“衣服(類名)”,我又該如何給她修改是符合她“身材”(類名)的衣服尺寸大小呢?
三、如何修改?修改的方法是什么?
1、找到下拉框的類名,使用元素檢查器查看,并寫一個全局的樣式
2、通過樣式穿透來修改樣式
3、通過官方給定的修改方式進行添加類名自定義修改
看著有三種方式,實則這三種方式都不太好找,有時候即使你全部用一遍,發現一個方法生效作用到網頁上的樣式都沒有。此時你是如此的目瞪口呆和啞口無言,就想說一句:Why?我明明...
四、挨個解決
先不管你是不是有這個scoped進行作用域隔離,有沒有都無所謂。
有的話無非就是作用到你當前頁面,而不會影響到其他頁面,即使類名相同。
然后就是核心問題:我該修改哪些類名呢?
我直接告訴你:
修改點擊之后的邊框和陰影,就修改這個類名:
<style lang="scss" scoped>.el-select__wrapper.is-focused{border-color: var( --focus-border-color) !important;}
</style>
修改下拉框的文字和背景顏色就修改這個類名:
<style lang="scss" scoped>.el-select-dropdown__item {color: var( --text-green-color) !important;}
</style>
修改下拉框的鼠標懸浮的字體顏色和背景顏色就修改這個類名
<style lang="scss" scoped>.el-select-dropdown__item.is-hovering {background-color: var(--bg-green-color) !important;color: var(--text-white-color) !important;}
</style>
修改下拉框的鼠標選中的字體顏色和背景顏色就修改這個類名
<style lang="scss" scoped>.el-select__wrapper.is-focused{border-color: var( --focus-border-color) !important;}
</style>
修改下拉框的原始的就是不點擊呈現出來的樣式就修改這個類名
<style lang="scss" scoped>.el-select__wrapper {border: 1px solid var(--border-color);box-shadow: none !important;}
</style>
以上就是一些常用的類名,但是這種修改屬于全局修改,也就是說如果你不在scoped中寫的話,如果你其他地方也用了這個組件,那么也會遵循這個樣式,因為這個樣式是全局的。
還有一個官方給的:就是給定一個自定義的類名。這里我給的是select_box
<template><div class="lang-switcher"><el-select v-model="selectedLocale" placeholder="選擇語言"style="min-width: 100px;width:5vw;":popper-append-to-body="false"class="select_box"><el-option v-for="item in locales" :key="item.code" :label="item.name" :value="item.code"/></el-select></div>
</template>
?下面是樣式:
<style lag="scss" scoped>
.select_box{// 默認placeholder:deep .el-input__inner::placeholder {font-size: 14px;font-weight: 500;color: #3E534F;}// 默認框狀態樣式更改:deep .el-input__wrapper {height: 42px;background-color: rgba(0,0,0,0)!important;box-shadow: 0 0 0 1px #204C42 inset!important;--el-select-focus-border-color:#5AC087!important;--el-select-hover-border-color: #5AC087!important;}// 修改下拉框樣式-點擊框focus:deep .is-focus .el-input__wrapper {box-shadow: 0 0 0 1px #5AC087 inset!important;--el-select-focus-border-color:#5AC087!important;--el-select-hover-border-color: #5AC087!important;}:deep .el-select__caret {color:#5AC087!important; // 清除按鈕}:deep .el-input__inner {color: #5AC087!important; // 選中字體色}
}// 下拉框-展開樣式
.el-select-dropdown__item.selected {// background-color: #83e818!important; // 選中
}
.el-select-dropdown__item.hover {background-color: #498f6c!important; // hover
}
:deep .el-dropdown-menu__item:not(.is-disabled) {// color: #182F23!important; // disabled
}
.el-select-dropdown__item {color: #4FC78A !important; // 下拉項顏色
}
:deep .el-popper{background-color: #121f1b!important; // 展開下拉背景border: 1px solid #498f6c!important; // 展開下拉邊框
}
:deep .el-popper .el-popper__arrow::before{border-top: 1px solid #498f6c!important; // 箭頭按鈕邊框background-color: #121f1b!important; // 箭頭按鈕背景色
}
</style>
補充:
在寫自定義類名的時候,最好也加上這段代碼=》:popper-append-to-bofy="false"加上這個的意思是將這個選項的容器掛載到你的最外層盒子上div#app,如果你不加上這個,那么這個選項的容器就會是最外層盒子的兄弟元素,因為你不是為了避免作用到全局而加上了scoped嗎,這個scoped就是將你的樣式局限到當前最外層盒子上,如果你即不想影響到全局,又想作用到當前盒子,那么就必須加上這個屬性,否則無法具有樣式的穿透效果。
加上的話這個容器的盒子是在這個里面的,就變成父子節點,而不是兄弟節點了。
到此這個常用到的就結束了,如果你還有其他的需要用到的,可以在評論中留言,我們一起學習交流。