I have made floating text input, when user user focus on input my text is floating up, but I need one "close x" icon also in my input when user click on my input.

```
To include "x cloase" icon I want to use "font-awesome" 
<i class="fa fa-times-circle" aria-hidden="true"></i> 

```

when user click outside of input close icon should not be displayed.

please help me how I can show my close icon on focus of input, below is my code for reference.

```css
.floatInput>input:focus~.floating-label,
.floatInput>input:not(:focus):valid~.floating-label {
  top: 0px;
  left: 18px;
  font-size: 11px;
  opacity: 1;
}

.floatInput>.inputText {
  font-size: 16px;
  width: 100%;
  height: 50px;
  padding-left: 16px;
  padding-top: 10px;
  border: 1px solid #ddd;
  text-shadow: none;
  box-shadow: none;
}

.floatInput>.floating-label {
  position: absolute;
  pointer-events: none;
  left: 10px;
  top: 15px;
  transition: 0.2s ease all;
}

.btn.header-navbar-button.buttonRight {
  background: #3170b7;
  border: 1px solid #3170b7;
  color: #fff;
  padding-top: 14px;
  padding-bottom: 14px;
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group ml15 mt20 column90 floatInput">
  <input type="text" class="inputText" required/>
  <span class="floating-label">Your email address</span>
  <span class="input-group-btn">
<button class="btn header-navbar-button buttonRight" type="button">
check IMEI
</button>
</span>
</div>
```