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

【问题标题】：Removing blue border around BlueprintJS numeric input on focus在焦点上移除 BlueprintJS 数字输入周围的蓝色边框
【发布时间】：2021-07-08 19:23:34
【问题描述】：

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

// Numeric input

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

// styling.scss

.inputTest {
  width: 50px;
  
  * > * {
    :focus {
      border: none;
    }
  }
}

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

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

【问题讨论】：

你需要替换 box-shadow 而不是边框。
这能回答你的问题吗？ How to remove outline border from input button
@m4n0 没有解决问题，还有边框。
@xdumaine 我已经看过了，没有一个答案适用于此。
检查这个：nimb.ws/Uhz9dW

标签： javascript css typescript sass blueprintjs

【解决方案1】：

你的选择器不好：

* > * 表示“任何孩子的直接孩子”，嵌套的 :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, 124, 189, 0), inset 0 0 0 1px rgba(16, 22, 26, 0.15), inset 0 1px 1px rgba(16, 22, 26, 0.2);;
    }
  }
}

https://jsfiddle.net/k9uLjwyf/

【讨论】：