iview 一行显示2列,select多选横向滚动条,兼容下拉图标

.ivu-form { display: flex; flex-wrap: wrap; .ivu-form-item { width: 50%; margin-bottom:14px; .ivu-form-item-error-tip{ color: #F56C6C; font-size: 12px; line-height: 1; padding-top: 4px; position: absolute; top: 100%; left: 0; padding-top: 2px; } .ivu-select-multiple{ .ivu-select-selection{ &>div{ display: flex; flex-wrap: nowrap; overflow-y: hidden; overflow-x: auto; position: absolute; line-height: normal; white-space: normal; top: 50%; transform: translateY(-50%); width: calc(100% - 20px); } // scrollbar ::-webkit-scrollbar { width: 4px; height: 4px; } ::-webkit-scrollbar-button { display: none } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--font-s-a-20); //滚动条颜色 border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--font-s-a-80); //滚动条颜色 } .ivu-select-arrow{ display: none; // 自带的图标未知有问题隐藏掉自己画一个 } &:before{ font-family: psi-design-fonts; position: absolute; top: 50%; right: 8px; line-height: 1; transform: translateY(-50%); font-size: 12px; color: var(--font-s); content:"\f116"; } } .ivu-tag{ height: 20px; line-height: 18px; margin: 0 4px 0 0; min-width: 60px; } } } .ivu-form-item-100 { width: 100%; } }

posted @ 2021-11-04 21:25  莫欺  阅读(439)  评论(0)    收藏  举报