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%; } }