0

I'm currently working on an application where I need to change a Label element if another DIV is visible.

I have this structure:

 <label class="searchbox">
   <input type="text" />
 </label>
 <div class="results">Hidden Div with results of search</div>

And this CSS:

.searchbox {
 background-color: red;
}

.results {
 display: none;
}

My challenge is... I need to change the background-color of .searchbox label if the input if focused and the .results class is not hidden.

If the user clicks outsite the results box, then box will be closed but the input still typed with the original background-color.

And I dont have access to change the JS or html right now, only the CSS.

Rodrigo Roberto de Almeida
  • 93
  • 9
  • 2
    This is not possible with only CSS. – Sean May 17 '21 at 13:25
  • With only CSS it doesn't seem possible. u need to change structure of your html or use JS – Sandeep K Goyal May 17 '21 at 13:30
  • How is the `.results` element toggled between visible and hidden? – David Thomas May 17 '21 at 13:37
  • Even if you had a means of detecting with CSS if an element was on screen with some pseudoselector, the order of the markup makes it impossible because you can't target an element based on the content that _follows_ it. – Alexander Nied May 17 '21 at 13:41
  • Your html, as it is, won't allow you to style, show/hide anything here. But what you want to do is possible if your structure can be styled. That is how full css hamburger menus work if you need examples. You are actually having the wrong question. ;) – G-Cyrillus May 17 '21 at 14:03

0 Answers0