Удаление синей рамки вокруг числового ввода BlueprintJS в фокусе

Я использую компонент числового ввода 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/


typescript javascript css sass blueprintjs
person TheStrangeQuark    schedule 13.04.2021    source источник
comment
Вам нужно заменить тень окна, а не границу.   -  person m4n0    schedule 13.04.2021
comment
Отвечает ли это на ваш вопрос? Как удалить границу контура с кнопки ввода   -  person xdumaine    schedule 13.04.2021
comment
@ m4n0, это не решило проблему, граница все еще есть.   -  person TheStrangeQuark    schedule 13.04.2021
comment
@xdumaine Я уже посмотрел на это, ни один из ответов не помог.   -  person TheStrangeQuark    schedule 13.04.2021
comment
Проверьте это: nimb.ws/Uhz9dW   -  person m4n0    schedule 13.04.2021

Ответы (1)


arrow_upward
1
arrow_downward

Ваш селектор плохой:

* > * означает непосредственный дочерний элемент любого дочернего элемента, а вложенный :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/

person xdumaine    schedule 13.04.2021