vue如何修改el-form-item中的label樣式修改問題
更新時間：2023年10月17日 09:11:10 作者：__十七
這篇文章主要介紹了vue如何修改el-form-item中的label樣式修改問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
修改el-form-item中的label樣式修改
操作步驟
1，style標(biāo)簽中不要加scoped
2，在對應(yīng)的el-form-item的label標(biāo)簽屬性中加入class屬性
3，在style標(biāo)簽中，先找到label對應(yīng)的class，在修改label
<el-form-item label="用戶名" class="item">
<el-input v-model="ruleForm.username" placeholder="請輸入用戶名" maxlength="10"></el-input>
</el-form-item>
<style lang="less">
.item .el-form-item__label{
color: blake;
}
</style>
vue使用elementUI form表單label樣式修改
1.刪除style標(biāo)簽中的 scoped 屬性
<style lang="lang" scoped>
...
</style>2.在對應(yīng)el-form-item的label屬性中加入class樣式
<el-form-item label="用戶名" class="item">
<el-input v-model="ruleForm.username" placeholder="請輸入用戶名" maxlength="10"></el-input>
</el-form-item>3.審查元素，找到label對應(yīng)的class
如：.el-form-item__label 添加如下樣式代碼
.item .el-form-item__label{
color: wheat;
}總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Pinia實現(xiàn)數(shù)據(jù)持久化存儲實踐
安裝pinia-plugin-persist插件,引入并掛載后啟用數(shù)據(jù)緩存（默認存入sessionStorage）,可通過paths自定義持久化字段,未指定的state將不進行緩存2025-07-07
這篇文章主要介紹了vue 右鍵菜單插件 簡單、可擴展、樣式自定義的右鍵菜單，本文給大家分享個例子，給大家及時的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下2018-11-11
這篇文章主要介紹了Vue設(shè)置頁面輪詢實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-11-11
這篇文章主要介紹了Vue3之事件綁定的實現(xiàn)邏輯,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
關(guān)于導(dǎo)入、配置Vuetify遇到的幾個問題
這篇文章主要介紹了關(guān)于導(dǎo)入、配置Vuetify遇到的幾個問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
本文主要介紹了?vue全局引入scss,我們在寫VUE的時候,會使用scss，也會做一些通用樣式,方便使用,在寫好的通用樣式的時候,每次都要單文件導(dǎo)入,剛開始寫的時候,感覺還好,后面工程量大了后,就顯得麻煩,那么本文就全局導(dǎo)入scss樣式,下面來看詳細內(nèi)容,需要的朋友可以參考一下2021-11-11
vue 實現(xiàn)element-ui中的加載中狀態(tài)
這篇文章主要介紹了vue 實現(xiàn)element-ui中的加載中狀態(tài)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue實現(xiàn)el-table點選和鼠標(biāo)框選功能的方法
在Vue中我們經(jīng)常需要處理表格數(shù)據(jù),這篇文章主要給大家介紹了關(guān)于vue實現(xiàn)el-table點選和鼠標(biāo)框選功能的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-10-10
這篇文章主要為大家詳細介紹了vue實現(xiàn)驗證碼倒計時按鈕，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了vue多頁面開發(fā)和打包的正確處理方法，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2018-04-04