Removing blue border around BlueprintJS numeric input on focus

Question

I'm using a BlueprintJS Numeric Input component and want to remove the blue outline when you focus on the component. I want to remove it because it's inside something else that has its own border when you focus it. I've built the following example:

// Numeric input

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

// styling.scss

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

But when you click on the input, it still has a blue border. Is there some other way to remove this?

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

Answer 1

Your selector is bad:

* > * means "the immediate child of any child" and a nested :focus is another child but the input isn't nested that deep. Additionally, you need to override 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/