antdVue 重置select和input的样式 去掉蓝色换成灰色

代码实现:
<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的样式 去掉蓝色换成灰色的更多相关文章
- input清空和重置select下拉框
背景 一般页面搜索条件都会有input输入框和select选择框,同时页面上都会有重置reset按钮,这时就需要清空input和重置select 实现 清空input 清空单个input: $(&qu ...
- input range样式更改,模拟滑块
input range 样式更改,js模拟滑块实时更新数据. 效果图: html 代码: <div> <span class="slider"></s ...
- vue2.0结合Element实现select动态控制input禁用
今天有一个盆友问小颖,怎么实现用select动态控制input禁用,也就是说,input默认是可编辑的,但是每当我选一次select,input就会变成禁用,虽然小颖不知道她为什么这样做,因为小颖觉得 ...
- 闲聊select和input常用的小插件
前言 在pc端的项目中,经常会用到表单标签,莫过于是select和input这两种,这两种相当常用.但往往原生的功能不尽人意,即使 input中type有n多属性,甚至连时间控件都有,但仍旧满足不了我 ...
- 图片-定义select向下箭头样式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- input输入样式,动画
模板描述:input输入样式 动画,有输入框也有搜索框的样式,多种多样,大家根据自己的喜欢来. 找网站SEO教程,网站模板,以及想要建立个人博客的朋友来涂志海个人博客网,这里有你想要的一切(万一没有的 ...
- iScroll滚动区域中select、input、textarea元素无法点击的Bug修复
最近在一个项目中使用了iScroll4模拟滚动效果,调试过程中发现一个表单页中的所有表单项都无法点击聚焦, 如<select>.<input>.<textarea> ...
- Input框去掉蓝色边框
Input框去掉蓝色边框: <input type="text" name="" value="" class="Inpt& ...
- struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input
原文地址:struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input jsp页面 1 function dosearch() {2 if ($(&q ...
- 自定义input file样式
自定义input file样式:一般都是通过隐藏input,通过定义label来实现.这种做法要注意的是label的for属性要指定input对应的id; <!DOCTYPE html> ...
随机推荐
- cordova完整版本创建、修改自定义插件重新调试步骤带截图
创建第三方插件 npx plugman create --name myplugin --plugin_id xiao.jin.plugin --plugin_version 1.0.0 添加平台支持 ...
- Angularjs的工程化
Angularjs的工程化 AMD规范和CMD规范 为什么需要模块化管理工具 在编写项目时可能需要加载很多js文件,若b.js依赖a.js,且a.js比b.js大很多,那么浏览器会让b.js等待a.j ...
- 部署并运行laravel项目显示:SQLSTATE[HY000] [2002] 由于连接方在一段时间后没有正确答复或连接的主机没有反应,连接尝试失败。
composer安装完所需依赖之后仍旧打不开页面,排查之后发现是数据库的问题... 也就是说,.env文件的配置写错了,改一下就好啦
- KEIL5、STM32CubeMX、STM32CubeIDE 下载、安装
一.资源下载 Keil5下载链接: https://www.keil.com/download/product/ STM32 标准库芯片包下载链接: https://www.keil.com/dd2/ ...
- C#,Winform软件防破译-源代码加密简单方法之.NET REACTOR(一)
一..NET Reactor介绍 .NET Reactor是一个功能强大的代码保护和软件许可系统,适用于为.NET Framework编写的软件,并支持生成.NET程序集的所有语言. 支持Blazor ...
- VUE10 计算属性
1 Vue计算属性简介 1)定义:我们需要一个属性,但是这个属性不存在,但是可以通过已有的属性计算得来,那么就可以定义一个计算属性. 2)原理:底层借助了Object.defineproperty方法 ...
- pycharm软件的基本使用、python的注释语法、变量与常量、变量的命名风格、垃圾回收机制、数据类型、数据类型之整型、数据类型之浮点型
一.pycharm软件的基本使用 修改主题背景 修改字体大小 切换解释器 如何新建python文件 创建后缀是py的文件 注意:pycharm的语言 一定要使用英文的 二.python语法注释 (1) ...
- day11-JSON处理和HttpMessageConverter<T>
JOSN处理和HttpMessageConverter 1.JSON处理-@ResponseBody 说明:在实际开发中,我们往往需要服务器返回的数据都是 JSON 格式. SpringMVC 提供了 ...
- .net 字符串逗号隔开去重
1.本文背景 同时输入/选择多条信息或批量输入/选择多条信息形成一个逗号隔开的字符串集,会出现数据重复的错误情况,产生不必要的脏数据,本文依次收集测试几种有效的去重方法. 2.代码实现 1)方法一:L ...
- Hystrix断路器
1.介绍 ①产生原因 服务雪崩: 多个微服务之间调用,假设A调用B,C,B和C又调用其他微服务,这就是扇出. 如果扇出的链路上有某个微服务调用响应时间过长或者不可用,那么A调用会占用越来越多的系统资源 ...