在焦点上移除 BlueprintJS 数字输入周围的蓝色边框

如何解决在焦点上移除 BlueprintJS 数字输入周围的蓝色边框

我正在使用 BlueprintJS 数字输入组件，并希望在您关注该组件时移除蓝色轮廓。我想删除它，因为当你聚焦它时，它位于其他有自己边界的东西内。我构建了以下示例：

df_duplicates = df[df.duplicated('Id')]

// Numeric input

const input = (
  <Blueprint.Core.NumericInput
  className={"inputTest"}
  value={1}
  buttonPosition={"none"}
  />);

但是当你点击输入时，它仍然有一个蓝色的边框。有没有其他方法可以删除它？

https://jsfiddle.net/wbdfxrgz/8/

解决方法

你的选择器不好：

* > * 表示“任何孩子的直接孩子”，嵌套的 :focus 是另一个孩子，但输入的嵌套没有那么深。此外，您需要覆盖 box-shadow：

.inputTest {
  width: 50px;
  
  input:focus {
      // default active state box shadow
      box-shadow: 0 0 0 0 rgba(19,124,189,0),0 0 0 0 rgba(19,inset 0 0 0 1px rgba(16,22,26,0.15),inset 0 1px 1px rgba(16,0.2);;
    }
  }
}

https://jsfiddle.net/k9uLjwyf/