快捷導(dǎo)航

vue2-elementUI部分組件樣式修改方法

更新時間：2023年12月12日 09:17:01 作者：小沐°

這篇文章主要介紹了vue2-elementUI部分組件樣式修改,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧

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:改變選中時的邊框顏色

/deep/.el-input__inner:focus {
  border-color: #88733c
}

el-select：改變選中時的邊框、文本顏色

// 選擇框選中時的邊框顏色
/deep/.el-select .el-input.is-focus .el-input__inner {
  border-color: #88733c !important;
}
//選擇框選中又取消時的邊框顏色
/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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Element-UI控件Tree實現(xiàn)數(shù)據(jù)樹形結(jié)構(gòu)的方法
這篇文章主要介紹了Element-UI控件Tree實現(xiàn)數(shù)據(jù)樹形結(jié)構(gòu),本期介紹添加、修改等功能也比較簡單,可以通過element-ui的$prompt彈框控件來實現(xiàn),需要的朋友可以參考下
2024-01-01
vue?動態(tài)路由component?傳遞變量報錯問題解決
這篇文章主要為大家介紹了vue?動態(tài)路由component?傳遞變量報錯問題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-05-05
Vue項目中封裝axios的方法
這篇文章主要介紹了Vue項目中封裝axios的方法,axios 是一個輕量的 HTTP客戶端，基于 XMLHttpRequest 服務(wù)來執(zhí)行 HTTP 請求，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-05-05
Element框架el-tab點擊標(biāo)簽頁時再渲染問題的解決
本文主要介紹了Element框架el-tab點擊標(biāo)簽頁時再渲染問題的解決，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-04-04
vscode中的vue項目報錯Property ‘xxx‘ does not exist on type ‘Combin
這篇文章主要介紹了vscode中的vue項目報錯Property ‘xxx‘ does not exist on type ‘CombinedVueInstance＜{ readyOnly...Vetur（2339），文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-09-09
解決vue2中使用elementUi打包報錯的問題
這篇文章主要介紹了解決vue2中使用elementUi打包報錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-09-09
Vue的方法和屬性案例詳解
這篇文章主要介紹了Vue的方法和屬性案例詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下
2021-07-07
vue+animation實現(xiàn)翻頁動畫
這篇文章主要為大家詳細介紹了vue+animation實現(xiàn)翻頁動畫，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-06-06
vue.js實現(xiàn)日歷插件使用方法詳解
這篇文章主要為大家詳細介紹了vue.js模擬日歷插件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-09-09
Vue中引用JSON數(shù)據(jù)的方法小結(jié)
在現(xiàn)代Web開發(fā)中,JSON是一種輕量級的數(shù)據(jù)交換格式,易于人閱讀和編寫,同時也易于機器解析和生成,Vue.js作為一個流行的前端框架,支持多種方式引入和處理JSON數(shù)據(jù),本文將詳細介紹幾種在Vue中引用JSON數(shù)據(jù)的方法,需要的朋友可以參考下
2024-10-10