Applying css to sibling element when hovering - html

Question

I have an input box with a label. The label is inside the input box. I want the label to move above the input box when the input box is focused.
I think I need to use input:focus ~ label to focus the label when the input box is selected but I cannot get it to work.
html:
<div class="search-container">
<form [formGroup]="SearchForm" (ngSubmit)="getWeatherFromCity(SearchForm.value)" name="SearchForm">
<div class='city-input'>
<label for="searchCity">City </label>
<input class="form-input" formControlName="searchCity" id="searchCity">
</div>
<button class="button" title="Search">Search
</button>
</form>
</div>
css:
.search-container{
font-family: 'Roboto', sans-serif;
font-size: 20px;
margin: 20px;
.city-input{
position: relative;
display: inline;
input{
border-radius: 10px;
height: 2em;
width: 17.5em;
&:focus ~ label {
transform: translateY(-30px);
color: red
}
}
label{
transition: transform 0.5s;
position: absolute;
padding: 10px;
}
}
Please advise.
Cheers.

Answer 1

you can't select a previous element with just css afaik
you could use jQuery for this, kinda... demo
$( ".form-input" ).focus(function() {
$(".form-input").prev("label").addClass("the-class-to-handle-the-transition");
});
$( ".form-input" ).focusout(function() {
$(".form-input").prev("label").removeClass("the-class-to-handle-the-transition");
});