antd改变Select样式时，选中有删不了的小框

最新推荐文章于 2023-06-29 16:32:19 发布
最新推荐文章于 2023-06-29 16:32:19 发布
阅读量445 收藏
点赞数
分类专栏： antd 文章标签： react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42983685/article/details/120512952
版权
本文探讨了在Ant Design中，如何通过调整样式属性解决`.ant-select`组件聚焦时的边框问题，重点在于发现是box-shadow导致的视觉问题，通过设置`box-shadow: none;`解决了样式冲突。
摘要由CSDN通过智能技术生成

在这里插入图片描述

抓元素都注意到了
.ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) .ant-select-selector{
border:0 !important;
border-radius: 0;
}
是↑的锅，但是border什么的设置了没有用
其实是box-shadow的问题，设为none就好了

敲代码的狮子
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
antd(React) 关于自定义Select选择框的样式
weixin_38949279的博客
08-15 5315
注意】：因为使用的是global样式穿透，为了防止污染其他组件，需要在引用antd组件时再包裹一层
【antd】select组件在某操作之后选项框中清空
all_might1的博客
06-15 8369
一、需求实现要求 接到一个需求其中有个小，要求在页面中添加一个
修改antDesign中Select下拉菜单样式
最新发布
m0_52908101的博客
06-29 2946
先在父节点div中定义一id：<div id="dropFather">在使用popupClassName="drop" ，在less中写需要的样式。就可以在Elements中看到option了。菜单渲染父节点，默认渲染到 body 上。antd版本需大于4.23.0。
ant-design-vue中修改select中默认项的颜色背景
weixin_47062100的博客
12-02 1570
在ant-design-vue中修改selec组件的颜色背景
Antd点击select选择框，页面滚动，选项跟着滚动
qq_39650208的博客
12-30 2388
遇到问题如下： 做项目时，采用antd与react技术方案，需要实现选择一个select选择框，发现点击select选择框时，滚动页面，选项内容整体跟着页面滚动，而select选择框不动，如图： 解决办法： 在select选择框中，添加方法 getPopupContainer 在select代码块，添加一条语句： getPopupContainer={(triggerNode)=>{ return triggerNode.parentNode}} // 增加这个定位去解决选项滚着跑
Input、Select disable下样式覆盖
wuChiSha的博客
09-16 870
设置antd中Input和Select组件在disable下的样式
antd Select 清除外边框
pauline_的博客
08-06 2352
.ant-select:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) .ant-select-selector { border-color: transparent; box-shadow: none; }
antd select多选_antd多选下拉框一行展示的实现方式
weixin_32955455的博客
03-03 6039
我们都知道antd的select多选时，如果下拉框宽度不足，则自动浮动到下一行将下拉框撑大，但是这回影响到页面的整体布局。我们期望的效果是，下拉框只显示一行的值，超出一行的部分自动隐藏。下面有2种方案来实现这个效果。1.利用浮动原理设置下拉框的最大高度为一行的高度，然后超出的部分隐藏。.ant-select-selection--multiple {max-height: 32px;overflo...
react的antd左侧菜单及刷新选中状态
热门推荐
youlinaixu的博客
06-15 1万+
数据格式 [ { "title": "首页", "icon": "home", "path": "/home" }, { "title": "商品", "icon": "home", "path": "/catalogProduct", "children": [...
React:select+antd+react实现 select全选,反选
chives_1的博客
09-22 1991
实现select框的修改，antd在4.0版本前需要 经 Form.create() 包装组件，会自带 this.props.form 属性，详情可看antd的api。 handleChange (){ const ls =[] 判断select下的参数是否存在 if (this.props.form.getFieldValue("sourceBuildingIds" )){ 判断选定是否为全选 if (this.props.form.getFi...
ant-design-vue 修改ant-input disabled样式（原先样式他们觉得太深了，把字体原色改明显了，背景色改浅了）
今日最可爱YeahT
05-08 9144
在src目录下新建一个common.less文件，在main.js里面引入这个文件 common.less覆盖原先的样式 /*覆盖ant-design-vue 样式**/ .ant-input[disabled] { color: rgba(0, 0, 0, 0.6); background-color: #f9f9f9; } .ant-select-disabled...
清除antd中的select点击默认有蓝色边框
m0_57457086的博客
08-30 2118
.ant-select-selection__rendered { height: 100%; } .ant-select-selector { border: none !important; } .ant-select-selection { border: none !important; box-shadow: none; }
react对antd中Select组件二次封装
见贤思齐焉，见不贤内自省
10-28 2567
见贤思齐焉，见不贤内自省 建立 import React from 'react'; import { Select } from 'antd'; import 'antd/dist/antd.css'; import '../styles/select.less'; const {Option} = Select; class MSelect extends React.PureComponent { constructor(props) { super(props);
Ant-Select样式初始化
臧小川的博客
05-11 1467
效果图 JS import styles from './style.less' import { Select } from 'antd'; const index = () => { const { Option } = Select; function handleChange (value) { console.log(`selected ${value}`); } return ( <div style={
ant-design-vue注意事项
qq_37800258的博客
09-29 1441
a-form-model失去焦点立即表单验证 Form.Item 会对唯一子元素进行劫持，并监听 blur 和 change 事件，来达到自动校验的目的，所以要确保表单域没有其它元素包裹。如果有多个子元素，将只会监听第一个子元素的变化，可以通过如下方式验证： <a-form-model labelAlign="left" :label-col="labelCol" :wrapper-col="wrapperCol" :model="scheduleMeetingForm" :rul
input 赋值_自学Ant Design Vue第一节Input标签与Select标签的常用方法
weixin_39967996的博客
12-01 396
INPUT 标签 {{ testData }} {{testDate2}} ==================================================== SELECT 选择器 固定写法 Jack Lucy Disabled yiminghe 选中赋值 这是选中的中的值:{{ testData3 }} v-for遍历循环 {{item.t...
ant select点击删除默认蓝色边框
weixin_44481476的博客
05-24 1164
ant select点击删除默认蓝色边框 :global { // 删除右侧下拉箭头 .ant-select-arrow { display: none; } // 删除边框 .ant-select-selector { width: 200px; border: 0; padding: 0; color: #a0a0a0; box-shado
Ant Design UI组件之Select踩坑
weixin_34396103的博客
02-27 4747
Ant Design UI组件之Select踩坑 前言 在使用Ant design UI组件时总会遇到一些奇奇怪怪的问题，在本篇中将总结中在使用Select中几种容易常见的问题，持续更新 遇到的问题 在初始化Select值,如何根据value显示对应文本 实现代码如下 ... this.props.form.setFieldsVal...
antd的 input有下拉_antd Select框可输入可下拉选择
weixin_39934869的博客
12-20 2070
textFontSizeChange = (value,index) => {const {record} = this.state;record[index]=value||'';this.setState({record});let { layerData, layerUpdateConfig} = this.props;layerData.style.fontSize = value;...
antd的Select组件设置允许不选中任何项
06-03
可以设置`allowClear`属性为`true`，这样就可以在Select组件中显示一个清除按钮，点击清除按钮后就可以将选中的项清除掉，从而不选中任何项。示例代码如下： ```jsx import { Select } from 'antd'; const { Option } = Select; function handleChange(value) { console.log(`selected ${value}`); } function handleBlur() { console.log('blur'); } function handleFocus() { console.log('focus'); } <Select showSearch style={{ width: 200 }} placeholder="Select a person" optionFilterProp="children" onChange={handleChange} onFocus={handleFocus} onBlur={handleBlur} filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0 } allowClear //设置允许清除 > <Option value="jack">Jack</Option> <Option value="lucy">Lucy</Option> <Option value="tom">Tom</Option> </Select> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值