How can I make the search tags visible (the buttons above the text input field) when the search bar below them is clicked? I've tried using :hover, :focus, and :focus-within, but none of them seem to be working. Can someone help me figure out the issue?
Here's the code snippet:
.container {
margin: 0 0;
padding: 0 20px 0 20px;
padding-top: 5vh;
overflow: auto;
}
.up_buttons {
display: grid;
grid-template-columns: repeat(auto-fit, 200px);
justify-content: center;
padding: 10px;
grid-gap: 20px;
visibility: hidden;
}
.dwn_buttons {
display: grid;
grid-template-columns: repeat(auto-fit, 200px);
justify-content: center;
padding: 20px;
grid-gap: 20px;
visibility: hidden;
}
#bar:focus .dwn_buttons .up_buttons {
display: grid;
grid-template-columns: repeat(auto-fit, 200px);
justify-content: center;
padding: 20px;
grid-gap: 20px;
visibility: visible;
}