如何移除shadcn select组件光标聚焦时的边框

你遇到的是组件聚焦时默认的focus-visible样式导致的黑色边框，直接通过覆盖触发元素的样式就能解决：

• 找到SelectTrigger组件，在它的className里添加Tailwind样式：

  <SelectTrigger className="border-b border-gray-300 border-t-0 border-l-0 border-r-0 focus-visible:outline-none focus-visible:ring-0">
    {/* 你的组件内容 */}
  </SelectTrigger>
  

  其中：

  • focus-visible:outline-none 去掉浏览器默认的聚焦外边框
  • focus-visible:ring-0 移除shadcn组件自带的聚焦环样式

• 如果用自定义CSS而非Tailwind，直接给SelectTrigger对应的类写样式：

  .select-trigger:focus-visible {
    outline: none;
    box-shadow: none;
    /* 保留底部边框，确保样式不丢失 */
    border-bottom: 1px solid #d1d5db; /* 替换成你需要的底部线条颜色 */
  }
  

这样就能保证组件仅保留下拉箭头和底部线条，聚焦时不会出现黑色边框。

内容的提问来源于stack exchange，提问作者EBDS