element - 组件样式修改（在间选择器上移动时对应的时分秒增加背景色）

Posted 2023-03-23

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了element - 组件样式修改（在间选择器上移动时对应的时分秒增加背景色）相关的知识，希望对你有一定的参考价值。

参考技术A .el-input

.el-input__inner

&:focus

border-color: @primaryColor;

&::selection // 时间选择器的样式 ==》在时间选择器上移动时对应的时分秒增加背景色

background-color: @primaryColor;

color: @btnPlainColor;

.el-button

&:active

color: @primaryColor;

border-color: @primaryColor;

outline: 0;

&:focus

color: @primaryColor;

border-color: #f7dccc;

background-color: #f7dccc;

&:hover

color: @primaryColor;

border-color: #f7dccc;

background-color: #f7dccc;

.el-select-dropdown__item.selected

color: @primaryColor;

font-weight: 700;

.el-select-dropdown.is-multiple

.el-select-dropdown__item.selected

color: @primaryColor;

background-color: @btnPlainColor;

.el-button--primary

color: @btnPlainColor;

background-color: @primaryColor;

border-color: @primaryColor;

&:hover

background: @primaryColor;

border-color: @primaryColor;

color: @btnPlainColor;

.el-button--primary

&:active

background: @primaryColor;

border-color: @primaryColor;

color: @btnPlainColor;

.el-message-box__headerbtn

.el-message-box__close:hover

color: @primaryColor;

.el-picker-panel__icon-btn

&:hover

color: @primaryColor;

.el-date-picker__header-label

&:hover

color: @primaryColor;

.el-button.is-active, .el-button.is-plain

&:active

color: @primaryColor;

border-color: @primaryColor;

&:hover

background: @btnPlainColor;

border-color: @primaryColor;

color: @primaryColor;

&:focus

background: @btnPlainColor;

border-color: @primaryColor;

color: @primaryColor;

.el-button--text

color: @primaryColor;

&:active

color:@primaryColor;

background-color: transparent;

.el-picker-panel__footer

.el-button--text

&:hover

color: @primaryColor;

border-color: @btnPlainColor;

background-color: @btnPlainColor;

.el-checkbox__input.is-checked, .el-checkbox__input.is-indeterminate

.el-checkbox__inner

background-color: @primaryColor;

border-color: @primaryColor;

.el-pagination.is-background

.el-pager li:not(.disabled).active

background-color: @primaryColor !important;

color: @btnPlainColor;

&:hover

color: @btnPlainColor;

.el-pager li:not(.disabled)

&:hover

color: @primaryColor;

.el-pagination__sizes

.el-input

.el-input__inner:hover

border-color: @primaryColor;

.el-select

.el-input.is-focus

.el-input__inner

border-color: @primaryColor;

.el-input__inner

&:focus

border-color: @primaryColor;

.el-pagination__editor.el-input:focus

border-color: @primaryColor;

width: 50px;

.el-upload-list__item.is-success

.el-upload-list__item-name

&:hover

color: @primaryColor;

cursor: pointer;

&:focus

color: @primaryColor;

cursor: pointer;

.el-time-panel__btn.confirm

font-weight: 800;

color: @primaryColor;

.el-input.is-active

.el-input__inner

&:focus

border-color: @primaryColor;

outline: 0;

.el-date-table

td.end-date span, td.start-date span

background-color: @primaryColor;

td.available

&:hover

color: @primaryColor;

td.today

span

color: @primaryColor;

font-weight: 700;

td.current:not(.disabled)

span

color: @btnPlainColor;

background-color: @primaryColor;

.el-time-spinner__arrow.el-icon-arrow-down:hover

color: @primaryColor;

.el-time-spinner__arrow

&:hover

color: @primaryColor;

&:focus

color: @primaryColor;

.el-range-editor.is-active, .el-range-editor.is-active:hover

border-color: @primaryColor;

.el-input__inner

&:hover

border-color: @primaryColor;

&:focus

border-color: @primaryColor;

.el-dialog__headerbtn

.el-dialog__close

&:hover

color: @primaryColor;

&:focus

color: @primaryColor;

(Select)解决：Element-ui 中 Select 选择器下拉框样式及输入框样式的修改问题(背景色透明与悬停背景色变化与下拉框边距变化等操作)

Ⅰ、`Element-ui` 提供的组件与想要目标情况的对比：

1、Element-ui 提供组件情况：

其一、Element-ui 自提供的代码情况为(示例的代码)：

// Element-ui 自提供的代码：
<template>
  <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
  export default 
    data() 
      return 
        options: [
          value: '选项1',
          label: '黄金糕'
        , 
          value: '选项2',
          label: '双皮奶'
        , 
          value: '选项3',
          label: '蚵仔煎'
        , 
          value: '选项4',
          label: '龙须面'
        , 
          value: '选项5',
          label: '北京烤鸭'
        ],
        value: ''
      
    
  
</script>

代码地址：https://element.eleme.cn/#/zh-CN/component/select

其二、页面的显示情况为：

A、el-select 输入栏的情况展示：

B、el-select 下拉框的背景情况展示：

C、el-select 下拉框的悬停情况展示(即：默认悬停时的字体背景颜色为灰色)：

2、目标修改后的情况：

A、el-select 输入栏的情况展示(即：输入栏的长度设置及背景颜色设置)：

B、el-select 下拉框的背景情况展示(即：下拉框的背景颜色，样式等的修改)：

C、el-select 下拉框的悬停情况展示(即：修改默认的悬停颜色)：

Ⅱ、实现 Select 选择器下拉框样式及输入框样式变化的过程：

1、输入框样式的修改：

其一、代码：

<style lang="scss" scoped>

// 设置输入框的长度为：102px;
/deep/.el-input--suffix .el-input__inner 
  padding-right: 102px;


// 设置输入框的背景色、字体颜色、边框属性设置；
/deep/.el-input__inner 
  background-color: #003e00;
  color: #fff;
  border: 1px solid #e43179;

</style>

其二、效果展示：

A、输入框的效果展示(即：可以设置成想要背景与边框的效果)：

B、下拉框的效果展示：

2、下拉框样式的修改：

其一、代码：

// 注意：此时一定要在 <el-select> 里添加 :popper-append-to-body="false" 属性；
// 若未加入 :popper-append-to-body="false" 属性，那么此时渲染后的 DOM 元素不在 #app 元素内部；
// 原因: el-select 里面的 select-popper 元素渲染后会脱离 #app ,因此使用深度选择器也无法定位该元素;

<style lang="scss" scoped>

// 设置下拉框的背景颜色及边框属性；
/deep/.el-select-dropdown 
  // 若不将下拉框的背景颜色设置为：transparent，那么做不出来半透明的效果；
  // 因为其最终的显示为：下拉框有一个背景颜色且下拉框的字体有一个背景颜色，重叠后的效果展示；
  background-color: transparent;
  border: 1px solid blue;


// 设置下拉框的字体属性及背景颜色；
.el-select-dropdown__item 
  font-size: 7px;
  line-height: 19px;
  color: #fff;
  font-weight: 200;
  background-color: #003e00;


// 设置下拉框列表的 padding 值为：0；(即：样式调整)
/deep/.el-select-dropdown__list 
  padding: 0;


// 设置输入框与下拉框的距离为：0; (即：样式调整)
/deep/.el-popper[x-placement^="bottom"] 
  margin-top: 0px;


// 将下拉框上的小箭头取消；(看着像一个箭头，其实是两个重叠在一起的箭头)
/deep/.el-popper .popper__arrow,
/deep/.el-popper .popper__arrow::after 
  display: none;


// 设置鼠标悬停在下拉框列表的悬停色；
.el-select-dropdown__item:hover 
  background-color: rgba(0, 225, 219, 0.690196078431373);

</style>

其二、效果展示：

A、输入框的效果展示：

B、下拉框的效果展示：

3、整个代码的页面展示效果为：

其一、输入框的效果展示：

其二、下拉框的效果展示：

Ⅲ、修改 `Select` 选择器下拉框及输入框达到目标效果的过程：

1、整体的代码：

<template>
  <div>
    <el-row type="flex" justify="end">
      <el-col :span="6">
        <el-select
          v-model="value"
          :popper-append-to-body="false"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option> 
        </el-select>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default 
  data() 
    return 
      options: [
        
          value: "选项1",
          label: "黄金糕",
        ,
        
          value: "选项2",
          label: "双皮奶",
        ,
        
          value: "选项3",
          label: "蚵仔煎",
        ,
        
          value: "选项4",
          label: "龙须面",
        ,
        
          value: "选项5",
          label: "北京烤鸭",
        ,
      ],
      value: "",
    ;
  ,
;
</script>

<style lang="scss" scoped>
/deep/.el-input--suffix .el-input__inner 
  padding-right: 102px;

/deep/.el-input__inner 
  background-color: #00083e;
  color: #fff;
  border: 1px solid #31cae4;


.el-select-dropdown__item 
  font-size: 7px;
  line-height: 19px;
  color: #fff;
  font-weight: 200;
  background-color: #00083e;

/deep/.el-select-dropdown 
  background-color: transparent;
  border: 1px solid blue;

/deep/.el-select-dropdown__list 
  padding: 0;

/deep/.el-popper[x-placement^="bottom"] 
  margin-top: 0px;

/deep/.el-popper .popper__arrow,
/deep/.el-popper .popper__arrow::after 
  display: none;

.el-select-dropdown__item:hover 
  background-color: rgba(0, 225, 219, 0.690196078431373);

</style>

2、效果展示：

Ⅳ、小结：

其一、哪里有不对或不合适的地方，还请大佬们多多指点和交流！
其二、有兴趣的话，可以多多关注这个专栏(Vue(Vue2+Vue3)面试必备专栏)：https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482

以上是关于element - 组件样式修改（在间选择器上移动时对应的时分秒增加背景色）的主要内容，如果未能解决你的问题，请参考以下文章

VUE: Scope模式下，修改Element ui样式

VUE Element Admin框架深度选择器/deep/编译报错，导致el-card修改样式失败的解决方案

基于Vue和Element-UI中Select 选择器的分组全选以及样式修改问题

vue组件样式添加scoped属性之后，无法被父组件修改。或者无法在本组件修改element UI样式

深度选择器

element - 组件样式修改 （在间选择器上移动时 对应的时分秒增加背景色）