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

Question

我正在使用 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/

Answer 1

您的选择器错误：

* > * 表示“任何 child 的直接 child”，嵌套的 :focus 是 另一个 child 但输入没有嵌套那么深。此外，您需要覆盖 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/

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

Removing blue border around BlueprintJS numeric input on focus

javascript

css

sass

typescript

blueprintjs