Возможно ли, что кнопка, имеющая фокус, и повторное нажатие на нее очистит фокус, используя только CSS? ⇐ CSS

[Anonymous]

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

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

import styled from "styled-components";

const Button = styled.button`
width: 200px;
height: 100px;
background-color: red;

&:focus {
background-color: blue;
}
`;

export default function ButtonFocus() {
return Button;
}

Я знаю, как сделать это с помощью javascript, но пытаюсь сделать это, используя только css (в данном случае стилизованный компонент, просто чтобы сохранить его на той же странице).
п>

Подробнее здесь: https://stackoverflow.com/questions/782 ... -its-focus