求好的 Bases 样式 CSS，原生太丑了

[美人儿呀 (Wrwe)]

特别是当数据类型是列表时，表格中满面的 x x

能把这个 xx 隐藏掉吗？只有当光标放上去时，才显示的那种。

或者，列表选项可以设置样式吗？

我一直找不到它们的 CSS 选择器。

[Azona77]

我是为了避免误触隐藏了这个按钮，晚点我把css放上来

/* Bases表格视图 - 列表属性删除按钮悬浮显示 */
.bases-table .multi-select-container:not(:hover) .multi-select-pill-remove-button{
  display: none;
}

[美人儿呀 (Wrwe)]

请问这个 Bases 分组的样式怎么写漂亮一点？

就是下图第2处。

[Azona77]

简单写了个，让GPT加了点平移动画，效果看动图：

/* bases表格视图 - 分组标题美化 */
.bases-group-heading{
    width:fit-content!important;
    background-color:#3AA99F30;
    padding-left:5px!important;
    border-radius:10px;
    
    &:hover > .bases-group-value{
        scale:1.5;
        transition:scale .1s;
        background-color:#3AA99F80;
    }
    
    .bases-group-value{
        background-color:#3AA99F60;
        padding-left:5px!important;
        padding-right:5px!important;
        border-radius:10px;
        
        transition:scale .3s;
        transform-origin:100%;
    }
}
/* bases表格视图 - 列表属性美化 */
.multi-select-pill{
    background-color:#3AA99F30;
    padding-left:5px!important;
    padding-right:5px!important;
    border-radius:4px;
    
    transition:scale .3s;
    transform-origin:50%;
    .multi-select-pill-remove-button{
          opacity: 0;
          visibility: hidden; 
          transition: all 0.4s ;
          transform: translateX(50px);
          pointer-events: none;
          max-width:0px;
    }
    &:hover{
        scale:1.15;
        background-color:#3AA99F60;
        transition:scale .3s; 
        .multi-select-pill-remove-button{
          scale:1.25;
          opacity: 1;
          visibility: visible;
          transform: translateY(0);
          pointer-events: auto;
          max-width:10px;
          transition: opacity 0.4s , transform 0.3s ,scale .3s, max-width 0.4s!important; /* 宽度过渡效果 */
        }
    }
}

/* 表格视图 - 列表属性自动换行 */
/* 行高暂时无法调整，官方固定了每行的初始位置 */
.multi-select-container{
  display: flex;
  flex-wrap: wrap!important;
  align-items: center;
  justify-content: flex-start; /* Left-align tags */
  gap: 4px;
  padding: 4px;
  
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  text-overflow: initial !important;
  height: auto!important;
}

---

如何使用css脚本？详见站内教程→【新手向教程】OB样式调整基础课：CSS入门科普

（忘记在css selector前面加bases的container了，可能会同时作用到其他地方的样式，晚点补上）