代码实现:

<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. [MySQL] 索引的使用、SQL语句优化策略

    目录 索引 什么是索引 索引的创建与删除 创建索引 删除索引 索引的使用 使用explain分析SQL语句 最佳左前缀 索引覆盖 避免对索引列进行额外运算 SQL语句优化 小表驱动大表 索引 什么是索 ...

  2. 有意思,小程序还可以一键生成App!

    小程序≠微信小程序 说到小程序,大部分同学的第一反应,可能是微信小程序.支付宝小程序,确实,小程序的概念深入人心,并且已经被约定俗成的绑定到某些互联网公司的 APP 上. 但是,"小程序&q ...

  3. 避免用Apache Beanutils进行属性的copy。why?让我们一起一探究竟

    在实际的项目开发中,对象间赋值普遍存在,随着双十一.秒杀等电商过程愈加复杂,数据量也在不断攀升,效率问题,浮出水面. 问:如果是你来写对象间赋值的代码,你会怎么做? 答:想都不用想,直接代码走起来,g ...

  4. iOS14新特性

    6月23日凌晨,苹果首次在线上举办全球开发者大会WWDC2020.在大会上,苹果对iOS.iPadOS.macOS.watchOS.tvOS进行更新,其中大家最关心的iOS14,主要更新了36个功能. ...

  5. ActiveMQ 常见集群模式

    Master Slave 架构模式 这种模式是基于文件共享锁的高可用集群,个人理解其实是一种 Failover 模式,可以是一主一从,也可以是一主两从. 本文使用 Docker 搭建一个主从模式的 A ...

  6. angular引入http服务创建服务注入

  7. ng + zorro angular表格横纵向合并,横向目前是手动,纵向是自动合并,微调后可适配三大框架使用

    表格横纵向合并,可以看一下代码编写之前和之后的样式,先上图~~ 表格页面文件.html <h1>正常表格</h1> <nz-table #colSpanTable [nz ...

  8. .Net6 使用 Ocelot + Consul 看这篇就够了

    前言 卯兔敲门,新的一年,祝大家前'兔'似锦!希望大家假后还能找到公司的大门 O(∩_∩)O !书接上文,我们使用了 Consul实现了服务注册与发现,对Consul不熟悉的同学可以先看看.这篇文章我 ...

  9. JavaScript 中更安全的 URL 读写

    前言 URL对于我们开发人员来讲,应该是非常熟悉了.在对URL进行参数拼接时,我们一般都会直接进行字符串拼接或使用模版字符串,因为这样非常方便,但是我们这样其实会在不知不觉中以不安全的方式编写 URL ...

  10. 论文翻译:2022_2022_TEA-PSE 2.0:Sub-Band Network For Real-Time Personalized Speech Enhancement

    论文地址:TEA-PSE 2.0:用于实时个性化语音增强的子带网络 论文代码: 引用: 摘要 个性化语音增强(Personalized speech enhancement,PSE)利用额外的线索,如 ...