被困擾的elementplus樣式修改問題:select選擇器修改和el-input修改

一、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就是將你的樣式局限到當前最外層盒子上,如果你即不想影響到全局,又想作用到當前盒子,那么就必須加上這個屬性,否則無法具有樣式的穿透效果。

加上的話這個容器的盒子是在這個里面的,就變成父子節點,而不是兄弟節點了。

到此這個常用到的就結束了,如果你還有其他的需要用到的,可以在評論中留言,我們一起學習交流。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/916791.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/916791.shtml
英文地址,請注明出處:http://en.pswp.cn/news/916791.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

GO 從入門到精通2

Go語言的反射&#xff08;Reflection&#xff09;機制通過 reflect 包實現&#xff0c;允許程序在運行時動態檢查、修改和操作變量的類型信息和值。以下是反射的核心概念、用法及注意事項的詳細解析&#xff1a;一、反射的基本概念reflect.Type 表示變量的類型信息&#xff0c;…

常用設計模式系列(十二)—享元模式

常用設計模式系列&#xff08;十二&#xff09;—享元模式 第一節 前言 昏昏沉沉的兩天過去了&#xff0c;也不知道為什么&#xff0c;突然總覺得很困&#xff0c;可能之前熬夜熬的多了&#xff0c;所以現在可能年紀大了&#xff0c;需要蹦一蹦才能把自己從頹廢的邊緣拉扯回來&…

基于spring boot的醫院掛號就診系統(源碼+論文)

一、開發環境 技術/工具描述MYSQL數據庫1. 體積小&#xff0c;安裝便捷&#xff1a;MySQL數據庫體積小&#xff0c;占用內存小&#xff0c;不影響電腦上其他軟件的運行&#xff0c;并且不需要因為安裝維護MySQL數據庫而重裝系統。2. 適合老舊電腦&#xff1a;作為學習開發的電…

spring-security

<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-security</artifactId> </dependency>spring: security: user: name: root password: 123456 這個配置在訪問接口時候根據您提供的Spring Secur…

搭建一個自定義的 React 圖標庫

搭建一個自定義的 React 圖標庫可以讓你在多個項目中復用統一的圖標資源&#xff0c;同時支持按需加載、主題化和靈活的配置。以下是詳細的步驟指南&#xff1a; 1. 設計圖標庫結構 首先規劃圖標庫的目錄結構和功能&#xff1a; my-react-icons/ ├── src/ │ ├── ico…

寶塔面板如何升級OpenSSL

寶塔面板如何升級OpenSSL&#xff08;親測可用&#xff09;目前一些服務器的OpenSSL還是1.0.1e版本&#xff0c;今天進行服務器漏洞檢測出現OpenSSL存在漏洞&#xff0c;那只能升級OpenSSL了。1、登錄SSH&#xff0c;查看OpenSSL版本openssl version2、下載源代碼wget https://…

深入理解 C++ 紅黑樹:從理論到實踐

引言 在計算機科學領域&#xff0c;數據結構是構建高效算法的基石。而在眾多的數據結構中&#xff0c;平衡二叉搜索樹因其優秀的查找、插入和刪除性能而備受關注。紅黑樹&#xff08;Red-Black Tree&#xff09;作為一種自平衡的二叉搜索樹&#xff0c;更是在 C 標準庫&#x…

外星人筆記本裝win11哪個版本好_外星人筆記本裝win11專業版教程

外星人筆記本安裝win11哪個版本好&#xff1f;答&#xff1a;外星人筆記本還是建議安裝win11專業版。Win分為多個版本&#xff0c;其中家庭版&#xff08;Home&#xff09;和專業版&#xff08;Pro&#xff09;是用戶選擇最多的兩個版本。win11專業版在功能以及安全性方面有著明…

自學嵌入式 day37 HTML

HTML:超文本標記語言HyperText Markup Language一種用于創建網頁的標準標記語言HTML 運行在瀏覽器上&#xff0c;由瀏覽器來解析。https://www.runoob.com/html/html-tutorial.html1.格式 <!DOCTYPE html> <html><head><meta charset"utf-8"&g…

【車聯網kafka】Kafka核心架構與實戰經驗(第一篇)

目錄 一、我與kafka的緣分-初識Kafka 二、Kafka深入探討-了解kafka ?編輯2.1 kafka 生產者框架 2.1.1 生產者在生活中的實例 2.1.2 kafka生產者流程及框架 1. 主線程處理階段 2. Sender線程處理階段 設計優勢總結 2.2 kafka 生產者框架中的一些關鍵參數 2.3 kafka 生…

Go 語言變量作用域

Go 語言變量作用域 引言 在編程語言中&#xff0c;變量作用域是定義變量可以使用和不可使用的區域。在Go語言中&#xff0c;理解變量的作用域對于編寫高效且易于維護的代碼至關重要。本文將詳細介紹Go語言中的變量作用域&#xff0c;包括其規則、類型以及實際應用。 一、變量作…

單卡10分鐘部署MiniCPM4-0.5B:輕量級大模型本地運行指南

一、介紹 MiniCPM 4 是一個極其高效的邊緣側大型模型&#xff0c;經過了模型架構、學習算法、訓練數據和推理系統四個維度的高效優化&#xff0c;實現了極致的效率提升。 &#x1f3d7;? 高效的模型架構&#xff1a; InfLLM v2 – 可訓練的稀疏注意力機制&#xff1a;采用可…

CSS變量與Houdini自定義屬性:解鎖樣式編程新維度

在前端開發中&#xff0c;CSS變量和Houdini自定義屬性正在徹底改變我們編寫和管理樣式的方式。這些技術不僅提高了樣式代碼的可維護性&#xff0c;更為CSS帶來了編程語言的強大能力。一、CSS變量&#xff1a;原生樣式的革命 CSS變量&#xff08;CSS Custom Properties&#xff…

Android中PID與UID的區別和聯系(2)

一、核心概念對比特性PID (Process ID)UID (User ID)本質進程唯一標識符應用身份標識符分配時機進程啟動時動態分配應用安裝時靜態分配生命周期進程結束時回收應用卸載時才回收變化性每次啟動都可能不同長期保持不變作用范圍單進程內唯一全設備范圍唯一核心作用系統資源管理&am…

TCPDump實戰手冊:協議/端口/IP過濾與組合分析指南

目錄 一、基礎過濾速查表 1. 協議過濾&#xff08;單協議&#xff09; 2. 端口過濾 3. IP地址過濾 二、組合過濾實戰示例 1. 協議端口組合 2. IP端口組合 3. 復雜邏輯組合 三、高級協議分析示例 1. HTTP請求分析 2. DNS問題排查 3. TCP連接問題分析 四、組合過濾場…

【智能協同云圖庫】智能協同云圖庫第八彈:基于阿里云百煉大模型—實現 AI 擴圖功能

AI 擴圖功能 需求分析 隨著 AI 的高速發展&#xff0c;AI 幾乎可以應用到任何傳統業務中&#xff0c;增強應用的功能&#xff0c;帶給用戶更好的體驗。 對于圖庫網站來說&#xff0c;AI 也有非常多的應用空間&#xff0c;比如可以利用 AI 繪圖大模型來編輯圖片&#xff0c;實現…

2025年Solar應急響應公益月賽-7月筆記ing

應急響應身為顏狗的我是真心覺得lovelymem的ui寫得~~~~【任務1】應急大師題目描述&#xff1a;請提交隱藏用戶的名稱&#xff1f;print打印注冊表&#xff0c;或者開啟環境是就有【任務4】應急大師題目描述&#xff1a;請提交黑客創建隱藏用戶的TargetSid&#xff08;目標賬戶安…

C++/CLI vs 標準 C++ vs C# 語法對照手冊

&#x1f680; C/CLI vs 標準 C vs C# 語法對照手冊&#x1f9e9; 核心類型系統對比 // 類型聲明語法對比 標準 C C/CLI C# ─────────────────────────────────────────────────…

倉庫管理系統-2-后端之基于繼承基類的方式實現增刪改查

文章目錄 1 數據庫表user 2 后端通用框架 2.1 User.java(實體類) 2.2 使用封裝的方法(繼承基類) 2.2.1 UserMapper.java(mapper接口) 2.2.2 UserService.java(service接口) 2.2.3 UserServiceImpl.java(service實現類) 2.2.4 UserController.java(控制器) 3 增刪改查(封裝的方法…

【el-table滾動事件】el-table表格滾動時,獲取可視窗口內的行數據

一個簡單的獲取內容的辦法 表格部分&#xff0c;主要是ref寫一下<el-table :data"tableData" ref"tableRef"> </el-table>進入頁面的時候綁定監聽 mounted(){ // 綁定滾動事件this.$nextTick(() > {const table this.$refs.tableRef;const…