ant design 多选框样式修改

最新推荐文章于 2024-11-18 16:29:11 发布

Destiny is not doomed

最新推荐文章于 2024-11-18 16:29:11 发布

阅读量1.6k

点赞数

分类专栏： react

本文链接：https://blog.youkuaiyun.com/weixin_43730646/article/details/113696530

版权

react 专栏收录该内容

1 篇文章

订阅专栏

这篇博客主要展示了如何在Ant Design框架下修改默认的多选框样式。通过CSS代码实现，包括设置选择项的宽度、位置、边框等属性，以达到特定的UI需求。代码示例详细说明了如何将这些样式应用到全局CSS中，以改变多选框的显示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ant design 默认单选框样式
ant默认多选框样式
2.修改后ant多选框样式
ui非让改没办法只能自己动手了，话不多说，看代码项目
修改后的多选框样式
代码
html结构
css要放在全局css
// 多选框样式开始
.selectAloneStyle .ant-select-item-option-selected:not(.ant-select-item-option-disabled) .ant-select-item-option-state {
max-width: 40px;
position: absolute;
left: 15px;
}
.selectAloneStyle .ant-select-item-option-content {
position: relative;
left: 40px;
overflow: visible!important;
overflow-x: visible!important;
max-width: 70%!important;
width: 70%!important;
}
.selectAloneStyle .ant-select-border {
width: 20px;
position: absolute;
left: -40px;
height: 20px;
border: 1px solid #ccc;
top: 0;
}