vue2-elementUI部分組件樣式修改方法
el-radio樣式:
/deep/ .el-radio__input .el-radio__inner { width: 20px; height: 20px; position: relative; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 1px solid #999; border-radius: 0; outline: none; transition: all 0.3s ease-in-out; box-sizing: border-box; cursor: pointer; } /* 選中后的字體顏色 */ /deep/ .el-radio__input.is-checked+.el-radio__label { color: #7e6934 !important; } /* 選中后圓圈的背景顏色 */ /deep/ .el-radio__input.is-checked .el-radio__inner { background: #7e6934 !important; border-color: #7e6934 !important; } // 選中后的樣式 /deep/ .el-radio__input.is-checked .el-radio__inner::after { width: 20px; height: 20px; display: inline-block; visibility: visible; padding-left: 0; text-align: center; content: "?"; color: #fff; font-size: 10px; line-height: 20px; border-radius: 0; background-color: #88733c; }
el-input:改變選中時(shí)的邊框顏色
/deep/.el-input__inner:focus { border-color: #88733c }
el-select:改變選中時(shí)的邊框、文本顏色
// 選擇框選中時(shí)的邊框顏色 /deep/.el-select .el-input.is-focus .el-input__inner { border-color: #88733c !important; } //選擇框選中又取消時(shí)的邊框顏色 /deep/.el-select .el-input__inner:focus { border-color: #88733c !important; } // 選擇框選中的文本顏色 .el-select-dropdown__item.selected { color: #88733c; }
到此這篇關(guān)于vue2-elementUI部分組件樣式修改的文章就介紹到這了,更多相關(guān)vue2 elementUI組件樣式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- vue2+elementUI的el-tree的選中、高亮、定位功能的實(shí)現(xiàn)
- vue2+elementui進(jìn)行hover提示的使用
- 解決vue2中使用elementUi打包報(bào)錯(cuò)的問題
- VUE2.0+ElementUI2.0表格el-table實(shí)現(xiàn)表頭擴(kuò)展el-tooltip
- VUE2.0+ElementUI2.0表格el-table循環(huán)動態(tài)列渲染的寫法詳解
- VUE2.0 ElementUI2.0表格el-table自適應(yīng)高度的實(shí)現(xiàn)方法
- vue2.0 elementUI制作面包屑導(dǎo)航欄
- Vue2.0+ElementUI實(shí)現(xiàn)表格翻頁的實(shí)例
- Vue2.0 UI框架ElementUI使用方法詳解
相關(guān)文章
Element-UI控件Tree實(shí)現(xiàn)數(shù)據(jù)樹形結(jié)構(gòu)的方法
這篇文章主要介紹了Element-UI控件Tree實(shí)現(xiàn)數(shù)據(jù)樹形結(jié)構(gòu),本期介紹添加、修改等功能也比較簡單,可以通過element-ui的$prompt彈框控件來實(shí)現(xiàn),需要的朋友可以參考下2024-01-01vue?動態(tài)路由component?傳遞變量報(bào)錯(cuò)問題解決
這篇文章主要為大家介紹了vue?動態(tài)路由component?傳遞變量報(bào)錯(cuò)問題解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05Element框架el-tab點(diǎn)擊標(biāo)簽頁時(shí)再渲染問題的解決
本文主要介紹了Element框架el-tab點(diǎn)擊標(biāo)簽頁時(shí)再渲染問題的解決,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04vscode中的vue項(xiàng)目報(bào)錯(cuò)Property ‘xxx‘ does not exist on type ‘Combin
這篇文章主要介紹了vscode中的vue項(xiàng)目報(bào)錯(cuò)Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09解決vue2中使用elementUi打包報(bào)錯(cuò)的問題
這篇文章主要介紹了解決vue2中使用elementUi打包報(bào)錯(cuò)的問題,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09vue+animation實(shí)現(xiàn)翻頁動畫
這篇文章主要為大家詳細(xì)介紹了vue+animation實(shí)現(xiàn)翻頁動畫,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-06-06Vue中引用JSON數(shù)據(jù)的方法小結(jié)
在現(xiàn)代Web開發(fā)中,JSON是一種輕量級的數(shù)據(jù)交換格式,易于人閱讀和編寫,同時(shí)也易于機(jī)器解析和生成,Vue.js作為一個(gè)流行的前端框架,支持多種方式引入和處理JSON數(shù)據(jù),本文將詳細(xì)介紹幾種在Vue中引用JSON數(shù)據(jù)的方法,需要的朋友可以參考下2024-10-10