I'm trying to get my "searchbardropdown" to show up when "searchbarinput" is clicked, but that doesn't work. Does anyone know what's going on? Thanks! In the picture, you can see that the background color changes when the input gets focus, but the dropdown doesn't show up.
.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>
P粉8980495622024-04-05 00:37:46
You should use the tilt (~) selector to select siblings.
.searchbardropdown{
display: none;
}
.searchbarinput:focus ~ .searchbardropdown{
display: block;
}
.searchbarinput:focus{
background-color: red;
}