hiding icon in html on input focus not working

Question

i am trying to hide the icon on input box when the input box is focused, my code is like below:

.errspan {
  top:37px;
  left: 35px;
        float: left;
        position: relative;
        z-index: 5;
        color: #f2136e;
        font-size: 18px;
    }
.samaraveera:focus + .errspan {display: none;}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<span class="fa fa-phone errspan"></span>
						<input class="samaraveera" type="text" >

this is not making my icon hide when the input box is focused, can anyone please tell me why the problem? thanks in advance

Answer 1

you are trying to style .errspan wich should be directly placed behind of the input according to your code, and looking at your DOM code, the span is infront of the input,

in the snippet below i put the span below the input and your code works just fine :)

.errspan {
  top:37px;
  left: 35px;
        float: left;
        position: relative;
        z-index: 5;
        color: #f2136e;
        font-size: 18px;
    }
.samaraveera:focus + .errspan {display: none;}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<input class="samaraveera" type="text" >
<span class="fa fa-phone errspan"></span>

more info about the + operator here: w3schools