vue2-elementUI部分組件樣式修改方法
更新時(shí)間：2023年12月12日 09:17:01 作者：小沐°
這篇文章主要介紹了vue2-elementUI部分組件樣式修改,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- vue2+elementUI的el-tree的選中、高亮、定位功能的實(shí)現(xiàn)
- vue2+elementui進(jìn)行hover提示的使用
- 解決vue2中使用elementUi打包報(bào)錯(cuò)的問(wèn)題
- VUE2.0+ElementUI2.0表格el-table實(shí)現(xiàn)表頭擴(kuò)展el-tooltip
- VUE2.0+ElementUI2.0表格el-table循環(huán)動(dòng)態(tài)列渲染的寫(xiě)法詳解
- VUE2.0 ElementUI2.0表格el-table自適應(yīng)高度的實(shí)現(xiàn)方法
- vue2.0 elementUI制作面包屑導(dǎo)航欄
- Vue2.0+ElementUI實(shí)現(xiàn)表格翻頁(yè)的實(shí)例
- Vue2.0 UI框架ElementUI使用方法詳解
相關(guān)文章
這篇文章主要介紹了keep-alive組件的作用與原理,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05
Vue2?中的數(shù)據(jù)劫持簡(jiǎn)寫(xiě)示例
這篇文章主要為大家介紹了Vue2?中的數(shù)據(jù)劫持簡(jiǎn)寫(xiě)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
這篇文章主要介紹了vue-cli 3.0 使用全過(guò)程，本文通過(guò)項(xiàng)目實(shí)例相結(jié)合的形式給大家介紹的非常詳細(xì),需要的朋友可以參考下2018-06-06
Vue?通過(guò)this.$emit()方法子組件向父組件傳值(步驟分享)
這篇文章主要介紹了Vue?this.$emit()方法通過(guò)子組件向父組件傳值,第一步在父組件中引入子組件，第二步子組件向父組件傳值，本文通過(guò)需要的朋友可以參考下2022-11-11
在vue-cli3.0 中使用預(yù)處理器 (Sass/Less/Stylus) 配置全局變量操作
這篇文章主要介紹了在vue-cli3.0 中使用預(yù)處理器 (Sass/Less/Stylus) 配置全局變量操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
Vue如何動(dòng)態(tài)改變列表搜索出關(guān)鍵詞的字體顏色
這篇文章主要介紹了Vue如何動(dòng)態(tài)改變列表搜索出關(guān)鍵詞的字體顏色問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue中vant組件樣式失效問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue+elementui(對(duì)話(huà)框中form表單的reset問(wèn)題)
這篇文章主要介紹了vue+elementui(對(duì)話(huà)框中form表單的reset問(wèn)題)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
vue跳轉(zhuǎn)方式（打開(kāi)新頁(yè)面）及傳參操作示例
這篇文章主要介紹了vue跳轉(zhuǎn)方式（打開(kāi)新頁(yè)面）及傳參操作,結(jié)合實(shí)例形式分析了vue.js跳轉(zhuǎn)實(shí)現(xiàn)方式與參數(shù)接受相關(guān)操作技巧,需要的朋友可以參考下2020-01-01
vue基于Element按鈕權(quán)限實(shí)現(xiàn)方案
這篇文章主要介紹了vue基于Element按鈕權(quán)限實(shí)現(xiàn)方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04