Changing from display hidden to display block when on focus not working

November 16, 2022

I’m trying to make my "searchbardropdown" show up when the "searchbarinput" is clicked, but this is not working. Does anyone know what is wrong with it? Thanks!
In the picture, you can see that the background color changes when the input is in focus, but the dropdown does not show.

CSS:

    display: none;
  }
  .searchbarinput:focus .searchbardropdown{
    display: block;
  }
  .searchbarinput:focus{
    background-color: red;
  }

HTML:

 <div class="searchbarcontainer">
            <script src="searchbar.js"></script>
            <div class="searchbar">
            </div><input class="searchbarinput" id="searchbarinput" type="text" placeholder="Pesquisar.."><button class="serchbarbutton" type="submit"><i class="material-symbols-outlined searchbarbuttonicon">search</i></button>
            <div class="searchbardropdown">
                <a class="dropdowna" href="#">// Trocar Variaveis<br></a>
                <a class="dropdowna" href="#trocarvariaveis">// Celsius para Farenheit<br></a>
                <a class="dropdowna" href="#celsiusparafarenheit">// Farenheit para Celsius<br></a>
                <a class="dropdowna" href="#farenheitparacelsius">// Area Circulo<br></a>
                <a class="dropdowna" href="#areacirculo">// Par ou Impar<br></a>
                <a class="dropdowna" href="#parouimpar">// Intervalo entre numeros<br></a>
                <a class="dropdowna" href="#intervalo">// Intervalo entre maior e menor de vetor<br></a>
                <a class="dropdowna" href="#intervalovetor">// Maior e menor numero<br></a>
                <a class="dropdowna" href="#maiormenor">// Paisagem ou retrato<br></a>  
                <a class="dropdowna" href="#paisagemouretrato">// Fizz ou Buzz<br></a>
                <a class="dropdowna" href="#fizzbuzz">// String do objeto<br></a>
                <a class="dropdowna" href="#stringobject">// Par ou impar ate limite<br></a>
            </div>
        </div>

>Solution :

You should use tilt(~) selector to select the sibling.

  .searchbardropdown{
    display: none;
  }
  .searchbarinput:focus ~ .searchbardropdown{
    display: block;
  }
  .searchbarinput:focus{
    background-color: red;
  }

 <div class="searchbarcontainer">
            <script src="searchbar.js"></script>
            <div class="searchbar">
            </div><input class="searchbarinput" id="searchbarinput" type="text" placeholder="Pesquisar.."><button class="serchbarbutton" type="submit"><i class="material-symbols-outlined searchbarbuttonicon">search</i></button>
            <div class="searchbardropdown">
                <a class="dropdowna" href="#">// Trocar Variaveis<br></a>
                <a class="dropdowna" href="#trocarvariaveis">// Celsius para Farenheit<br></a>
                <a class="dropdowna" href="#celsiusparafarenheit">// Farenheit para Celsius<br></a>
                <a class="dropdowna" href="#farenheitparacelsius">// Area Circulo<br></a>
                <a class="dropdowna" href="#areacirculo">// Par ou Impar<br></a>
                <a class="dropdowna" href="#parouimpar">// Intervalo entre numeros<br></a>
                <a class="dropdowna" href="#intervalo">// Intervalo entre maior e menor de vetor<br></a>
                <a class="dropdowna" href="#intervalovetor">// Maior e menor numero<br></a>
                <a class="dropdowna" href="#maiormenor">// Paisagem ou retrato<br></a>  
                <a class="dropdowna" href="#paisagemouretrato">// Fizz ou Buzz<br></a>
                <a class="dropdowna" href="#fizzbuzz">// String do objeto<br></a>
                <a class="dropdowna" href="#stringobject">// Par ou impar ate limite<br></a>
            </div>
        </div>