Одна из кнопок поля ввода не исчезает, когда она не в фокусе. ⇐ CSS

[Anonymous]

У меня есть две кнопки в поле ввода, я хотел бы скрыть их, когда поле ввода не в фокусе, я смог сделать это с одной из них, но не с другой. Вот песочница.
Я хочу скрыть левую кнопку, когда поле ввода не в фокусе. Правая кнопка уже работает как положено

Код: Выделить всё

CSS

Код: Выделить всё

.bf-clear-text-btn {
display: inline-block; // Ensure buttons are visible by default (for demo purposes)
}

.bp3-input-group {
.bp3-input:not(:focus) {
+ .bp3-input-action .bf-clear-text-btn:not(:focus):not(:hover),
.bp3-input-left-container .bf-clear-text-btn:not(:focus):not(:hover) {
display: none;
}
}
}

https://codesandbox.io/p/sandbox/confid ... s%3A13%2C5

Подробнее здесь: https://stackoverflow.com/questions/786 ... t-in-focus