【vue+elementUI】输入框样式、选择器样式、树形选择器和下拉框样式修改

news2024/11/24 8:04:38

输入框样式、选择器样式和下拉框样式修改

  • 1、输入框和选择器的样式修改:
  • 2、下拉弹框样式
      • A. 选择器的下拉弹框样式修改
      • B. 时间选择器的下拉弹框样式修改
      • C. vue-treeselect树形下拉框样式

1、输入框和选择器的样式修改:

在这里插入图片描述
写在style中不能加scoped,所以可以在最外层的div加一个专属名再写样式:

.my-dialog {
  // 输入框的背景
  .el-input .el-input__inner,
  .el-range-editor--mini.el-input__inner,
  .el-range-editor--mini .el-range-input,
  .el-select-dropdown__item,
  .el-select-dropdown__item,
  .el-picker-panel .el-date-picker,
  .vue-treeselect__menu,
  .vue-treeselect__option,
  .bonc-tree-select .vue-treeselect__single-value {
    background-color: #1d5293 !important;
    border-color: #1664b6 !important;
    color: #fff;
  }
}

2、下拉弹框样式

A. 选择器的下拉弹框样式修改

el-select下拉项的的容器是div#app之外的,所以在scoped作用域内使用>>>或/deep/修改样式无效,要想:
在这里插入图片描述
官网如是说:加:popper-append-to-body="false"
在这里插入图片描述
代码像普通样子写:

 <el-select v-model="value" placeholder="请选择" :popper-append-to-body="false">
   <el-option
     v-for="item in options"
     :key="item.value"
     :label="item.label"
     :value="item.value">
   </el-option>
 </el-select>
  .el-select-dropdown__item,
  .el-select-dropdown__item,{
    background-color: #1d5293 !important;
    border-color: #1664b6 !important;
    color: #fff;
  }
  .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    background-color: #203f64 !important;
  }

B. 时间选择器的下拉弹框样式修改

el-date-picker是将元素直接挂载到页面的中,而非自身元素下,所以使用/deep/穿透也是无法定位到元素的,要想做到修改样式:
在这里插入图片描述
在这里插入图片描述
官网说需要加:
在这里插入图片描述
代码:

<el-date-picker
  :popper-append-to-body="false"
  popper-class="datepopper"
  ...
/>

同样不能写在scoped里(时间选择器和时间范围选择器都有啦):

.datepopper {
  background: #1d5293 !important;
  border-color: #1764b6 !important;
  .el-date-picker__header-label,
  .el-year-table td .cell,
  .el-date-range-picker__content .el-date-range-picker__header div,
  .el-date-table th,
  .el-date-table td span {
    color: #fff !important;
  }
  .el-date-table td.today span {
    color: #1890ff !important;
  }
  .el-date-table td.in-range div {
    background-color: #1d3b69 !important;
  }
}

C. vue-treeselect树形下拉框样式

在这里插入图片描述

 :popper-append-to-body="false"
  .vue-treeselect__option.hover,
  .vue-treeselect__option:hover {
    background-color: #203f64 !important;
  }
  .vue-treeselect__menu-container {
    background: #1d5293 !important;
    border-color: #1764b6 !important;
    color: #fff;
  }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1022893.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

力扣:103. 二叉树的锯齿形层序遍历(Python3)

题目&#xff1a; 给你二叉树的根节点 root &#xff0c;返回其节点值的 锯齿形层序遍历 。&#xff08;即先从左往右&#xff0c;再从右往左进行下一层遍历&#xff0c;以此类推&#xff0c;层与层之间交替进行&#xff09;。 来源&#xff1a;力扣&#xff08;LeetCode&#…

远程监控电脑软件有哪些?远程桌面监控软件哪个好用

随着科技的发展&#xff0c;远程桌面监控软件已经成为企业和个人用户的重要工具。它们可以帮助用户在任何地方、任何时间监控和管理远程计算机。本文将详细介绍远程桌面监控软件是什么&#xff0c;有哪些常见的远程桌面监控软件。 首先&#xff0c;我们来了解一下什么是远程桌面…

win系统环境搭建(一)——Windows安装一些小工具

windows环境搭建专栏&#x1f517;点击跳转 win系统环境搭建&#xff08;一&#xff09;——Windows安装一些小工具 本系列windows环境搭建开始讲解如何给win系统搭建环境&#xff0c;本人所用系统是腾讯云服务器的Windows Server 2022&#xff0c;你可以理解成就是你用的wind…

gpu cuda 数组求和优化

欢迎关注更多精彩 关注我&#xff0c;学习常用算法与数据结构&#xff0c;一题多解&#xff0c;降维打击。 问题描述 给定1个数组&#xff0c;利用gpu求和并返回结果。 cpu 算法 #include <math.h> #include<vector> #include<time.h> #include <stdio…

了解:iperf网络性能测试工具

当进行网络性能测试时&#xff0c;可以使用iperf这个开源工具。iperf是一款网络测试工具&#xff0c;它能够测试TCP或UDP带宽质量&#xff0c;以及单向和双向吞吐量。使用iperf进行网络性能测试首先需要在被测试的两台计算机上安装iperf。 如何安装iperf&#xff1f; 在Debia…

HTTP请求行详解

目录 一、认识URL 二、认识方法 2.1 GET方法 2.2 POST方法 2.3 其他方法 请求行也就是HTTP请求的第一行&#xff0c;接下来将对第一行内容进行详细解释 一、认识URL 平时我们俗称的 "网址" 其实就是说的 URL (Uniform Resource Locator 统一资源定位符)。互联网上的…

利用哈希表封装unordered_map和unordered_set

目录 一、迭代器1.1 普通迭代器1.1.1 operator 1.2 const迭代器1.3 代码实现 二、封装unordered_set三、封装unordered_map 一、迭代器 1.1 普通迭代器 1.1.1 operator 对于哈希桶结构&#xff0c;它的迭代器应该如何设计呢&#xff1f;我们仅封装一个Node的指针就行了吗&am…

扬帆配资:首个国家层面电力现货市场 建设规则出炉

9月18日&#xff0c;国家发改委、国家动力局发布了已于近日印发的《电力现货商场底子规则&#xff08;试行&#xff09;》&#xff08;下称《规则》&#xff09;&#xff0c;作为国家层面的首个电力现货商场制作规则文件&#xff0c;推进构建全国一致电力商场系统。 扬帆配资&…

VB过程的递归调用,辗转相除法求最大公约数

VB过程的递归调用&#xff0c;辗转相除法求最大公约数 过程的递归调用&#xff0c;辗转相除法求最大公约数 Private Function gys(ByVal m%, ByVal n%) As IntegerDim r%r m Mod n m大或者n大都无所谓&#xff0c;这个不影响计算&#xff0c;由于辗转相除法的算法&#xff0c…

高阶数据结构——图

图 图的基本概念 图的基本概念 图是由顶点集合和边的集合组成的一种数据结构&#xff0c;记作 G ( V , E ) G(V, E)G(V,E) 。 有向图和无向图&#xff1a; 在有向图中&#xff0c;顶点对 < x , y >是有序的&#xff0c;顶点对 < x , y > 称为顶点 x 到顶点 y 的…

Weblogic反序列化漏洞(CVE-2018-2628/CVE-2023-21839复现)

内容目录 Weblogic反序列化漏洞(CVE-2018-2628/CVE-2023-21839)weblogic中间件CVE-2018-2628漏洞描述影响版本漏洞复现修复方案 CVE-2023-21839漏洞描述影响版本漏洞复现修复方案 Weblogic反序列化漏洞(CVE-2018-2628/CVE-2023-21839) weblogic中间件 WebLogic是美国Oracle公司…

Day 00 python基础认识与软件安装

1、基础认识 首先&#xff0c;我们先来区分、了解一些知识点 编程&#xff0c;编程语言 编程&#xff1a;用代码写一个程序 编程语言&#xff1a;用那种语法规则编写程序 &#xff08;人与计算机之间进行交流的工具&#xff1a;c、c、java、python、php、go……&am…

win系统环境搭建(四)——Windows安装mysql8压缩包版本

windows环境搭建专栏&#x1f517;点击跳转 win系统环境搭建&#xff08;四&#xff09;——Windows安装mysql8压缩包版本 本系列windows环境搭建开始讲解如何给win系统搭建环境&#xff0c;本人所用系统是腾讯云服务器的Windows Server 2022&#xff0c;你可以理解成就是你用…

openGauss学习笔记-74 openGauss 数据库管理-创建和管理视图

文章目录 openGauss学习笔记-74 openGauss 数据库管理-创建和管理视图74.1 背景信息74.2 管理视图74.2.1 创建视图74.2.2 查询视图74.2.3 查看某视图的具体信息74.2.4 删除视图 openGauss学习笔记-74 openGauss 数据库管理-创建和管理视图 74.1 背景信息 当用户对数据库中的一…

64位Ubuntu20.04.5 LTS系统安装32位运行库

背景&#xff1a; 在ubutu&#xff08;版本为20.04.5 LTS&#xff09;中运行./arm-none-linux-gnueabi-gcc -v 后提示“no such device”。 经多方查证&#xff0c;是ubutu的版本是64位的&#xff0c;而需要运行的编译工具链是32位的&#xff0c;因此会不兼容。 解决方法就是在…

ScheduledThreadPoolExecutor源码分析-延时线程池是如何实现延时执行的

ScheduledThreadPoolExecutor 线程池可以实现任务延时执行&#xff0c;那么它是怎么实现的呢&#xff1f;下面笔者进行详细分析 先看看它是怎么使用的 目录 1、延时执行使用 2、源码分析 2.1、ScheduledThreadPoolExecutor 初始化分析 2.2、ScheduledThreadPoolExecutor 执…

java项目之咖啡馆管理系统ssm+jsp

风定落花生&#xff0c;歌声逐流水&#xff0c;大家好我是风歌&#xff0c;混迹在java圈的辛苦码农。今天要和大家聊的是一款基于ssm的咖啡馆管理系统。技术交流和部署相关看文章末尾&#xff01; 开发环境&#xff1a; 后端&#xff1a; 开发语言&#xff1a;Java 框架&am…

Netty2

文章目录 Netty2Netty入站与出站机制Netty的handler链的调用机制 Netty2 Netty入站与出站机制 基本说明&#xff1a; 1&#xff09;netty的组件设计&#xff1a;Netty的主要组件有Channel&#xff0c;EventLoop&#xff0c;ChannelFuture&#xff0c;ChannelHandler&#xff…

[golang gui]fyne框架代码示例

1、下载GO Go语言中文网 golang安装包 - 阿里镜像站(镜像站使用方法&#xff1a;查找最新非rc版本的golang安装包) golang安装包 - 中科大镜像站 go二进制文件下载 - 南京大学开源镜像站 Go语言官网(Google中国) Go语言官网(Go团队) 截至目前&#xff08;2023年9月17日&#x…

中秋猜灯谜小游戏

中秋猜灯谜小游戏是一个基于HTML制作的互动游戏&#xff0c;旨在增添中秋节的欢乐氛围&#xff0c;通过猜灯谜来娱乐和挑战玩家。 目录 前言简介游戏规则 制作过程HTML 结构CSS 样式JavaScript 交互 功能实现题目和答案的存储游戏逻辑设计 前言 简介 游戏开始时&#xff0c;玩…