代码实现:

<template>
<div>
<a-select mode="tags" style="width: 200px" placeholder="请选择" @change="handleChange">
<a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
{{ (i + 9).toString(36) + i }}
</a-select-option>
</a-select>
<a-input placeholder="请输入" style="width: 200px"/>
</div>
</template>
<script>
export default {
name: 'test',
methods:{
handleChange(value) {
console.log(`selected ${value}`);
},
}
}
</script>
<style>
/* 重置selectl开始 */
.ant-select-dropdown-menu-item-active,
.ant-select-dropdown-menu-item:hover {
background-color: #edf2f5;
}
.ant-select-focused .ant-select-selection,
.ant-select-selection:focus,
.ant-select-selection:active {
border-color: #cccccc;
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0);
} .ant-select-selection:hover {
border-color: #cccccc;
}
/* 重置selectl结束 */
/* 重置input开始 */
.ant-input,.ant-input:focus,
.ant-input:hover,
.ant-input:active,
.ant-input-affix-wrapper:hover .ant-input:not(.ant-input-disabled)
{
border-color: #cccccc;
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0);
}
/* 重置input结束 */
</style>

  

antdVue 重置select和input的样式 去掉蓝色换成灰色的更多相关文章

  1. input清空和重置select下拉框

    背景 一般页面搜索条件都会有input输入框和select选择框,同时页面上都会有重置reset按钮,这时就需要清空input和重置select 实现 清空input 清空单个input: $(&qu ...

  2. input range样式更改,模拟滑块

    input range 样式更改,js模拟滑块实时更新数据. 效果图: html 代码: <div> <span class="slider"></s ...

  3. vue2.0结合Element实现select动态控制input禁用

    今天有一个盆友问小颖,怎么实现用select动态控制input禁用,也就是说,input默认是可编辑的,但是每当我选一次select,input就会变成禁用,虽然小颖不知道她为什么这样做,因为小颖觉得 ...

  4. 闲聊select和input常用的小插件

    前言 在pc端的项目中,经常会用到表单标签,莫过于是select和input这两种,这两种相当常用.但往往原生的功能不尽人意,即使 input中type有n多属性,甚至连时间控件都有,但仍旧满足不了我 ...

  5. 图片-定义select向下箭头样式

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. input输入样式,动画

    模板描述:input输入样式 动画,有输入框也有搜索框的样式,多种多样,大家根据自己的喜欢来. 找网站SEO教程,网站模板,以及想要建立个人博客的朋友来涂志海个人博客网,这里有你想要的一切(万一没有的 ...

  7. iScroll滚动区域中select、input、textarea元素无法点击的Bug修复

    最近在一个项目中使用了iScroll4模拟滚动效果,调试过程中发现一个表单页中的所有表单项都无法点击聚焦, 如<select>.<input>.<textarea> ...

  8. Input框去掉蓝色边框

    Input框去掉蓝色边框: <input type="text" name="" value="" class="Inpt& ...

  9. struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input

    原文地址:struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input jsp页面 1     function dosearch() {2         if ($(&q ...

  10. 自定义input file样式

    自定义input file样式:一般都是通过隐藏input,通过定义label来实现.这种做法要注意的是label的for属性要指定input对应的id; <!DOCTYPE html> ...

随机推荐

  1. VMware Workstation Pro 16安装CentOS7超详细图文步骤

    安装的需要 VMware官方网站安装VMware Workstation Pro 16: https://download3.vmware.com/software/wkst/file/VMware- ...

  2. 初探富文本之OT协同算法

    初探富文本之OT协同算法 OT的英文全称是Operational Transformation,是一种处理协同编辑的算法.当前OT算法用的比较多的地方就是富文本编辑器领域了,常用于作为实现文档协同的底 ...

  3. Java基础篇——JVM初步

    1.JVM的位置 2.JVM体系结构 3.类加载器 虚拟机加载器(java) 启动类(根)加载器(C++) 扩展类加载器(java)↑ 应用程序加载器(java)↑ 4.双亲委派机制 类加载器收到类加 ...

  4. CF1744B Even-Odd Increments

    简要题意 \(T\) 组数据,每组数据给定一个长度为 \(n\) 的数列,有 \(q\) 次操作,共有两种操作: \(\texttt{0 x}\),给数列中所有偶数加上 \(x\): \(\textt ...

  5. 终端安装python3使用如下指令

    ''' brew install python3 ''' 会报错,报错如下:Cannot install in Homebrew on ARM processor in Intel default p ...

  6. 虚拟化技术浅析第二弹之初识Kubernetes

    作者:京东物流 杨建民 一.微服务架构起源 单体架构:可以理解为主要业务逻辑模块(我们编写的代码模块,不包括独立的中间件)运行在一个进程中的应用,最典型的是运行在一个Tomcat容器中,位于一个进程里 ...

  7. 2023牛客寒假算法基础集训营1 ACDEFGHKLM

    比赛链接 A 题解 知识点:模拟. 显然. (用char输入到一半直接给答案跳出,WA了两小时,无话可说. 时间复杂度 \(O(1)\) 空间复杂度 \(O(1)\) 代码 #include < ...

  8. 前端防错以及好用小tips指南总结

    @前端防錯以及好用小tips指南總結 1.一般情況下我們接收到的都是對象格式,某些情況下,需要接到後端傳過來的奇怪的字符串格式的JSON,需要解析成對象,但是有時候他們傳過來的格式有問題,會報錯 解決 ...

  9. Salesforce LWC学习(四十一) If:true 即将弃用?

    本篇参考: https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.reference_dir ...

  10. 06yarn简介

    YARN简介 一.YARN是什么 YARN不是facebook的那个yarn,它从Hadoop 2引入,最初目的是改善MapReduce的实现,但是因为具备足够通用性,同样也可以支持其他的分布式计算模 ...