代码实现:

<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. 数据库服务器CPU不能全部利用原因分析

    背景 客户凌晨把HIS数据库迁移到配置更高的新服务器,上午业务高峰时应用非常缓慢. 现象 通过SQL专家云实时可视化界面看到大量的绿点,绿点表示会话在等待某项资源,绿点越大说明等待的会话数越多. 进入 ...

  2. CF1779 Least Prefix Sum

    url:Problem - C - Codeforces 题意: 给n个数字和一个m 给一个操作:每次使得其中一个下标的数字 *= -1 要求最后在所有前缀和中前m个数字是最小的 思路: 在所有前缀和 ...

  3. 宝塔SSL

    1:开启面板SSL访问教程 开启完之后,要以 https 方式访问面板 一定要先 下载证书 和 复制证书密码 再点"开启ssl",不然得重置再走一遍流程. [教程贴]如何开启面板S ...

  4. Hexo博客搭建记录

    Hexo博客搭建记录 参考视频:手把手教你从0开始搭建自己的个人博客 |无坑版视频教程 以下命令操作建议使用管理员权限完成 1. nodejs & hexo 安装 1.首先下载node.js, ...

  5. 学习ASP.NET Core Blazor编程系列二十一——数据刷新

    学习ASP.NET Core Blazor编程系列文章之目录 学习ASP.NET Core Blazor编程系列一--综述 学习ASP.NET Core Blazor编程系列二--第一个Blazor应 ...

  6. 【原创】linux实时应用如何printf输出不影响实时性?

    版权声明:本文为本文为博主原创文章,转载请注明出处 https://www.cnblogs.com/wsg1100.如有错误,欢迎指正. @ 目录 1. 前言 2. linux终端输出 3. 常见的N ...

  7. 交叉编译esp8089

    交叉编译esp8089 编译环境: 硬件:全志R528 ubuntu:Linux ubuntu 4.15.0-194-generic #205-Ubuntu SMP Fri Sep 16 19:49: ...

  8. .Net 7 托管Main入口的四种类型

    前言: 按照CLR的规则,C#托管Main入口其实有四种写法. 写法 第一种:最常见的,也是VS默认的,返回值void,带一个参数 static void Main(string[] args) { ...

  9. java进阶P-2.7

    类函数 函数 用于按指定字符(串)或正则去分割某个字符串,结果以字符串数组形式返回:对某些特殊字符,如果字符(串)正好是正则的一部分,则需要转义才能使用 字符有 | , + , * , ^ , $ , ...

  10. 时间日期相关总结-System类的常用方法

    时间日期相关总结 Date类 A.构造方法 Date();根据当前系统时间创建日期对象 Date(long time);根据传入的毫秒值时间创建日期对象 B.成员方法 long getTime(); ...