Is there a way to know via CSS when a `<ion-select>` element is on focus?

I'm trying to create a similar google animation inputs where you click and the label and it goes into the border, and I was able to successfully do it with `ion-input`, by using the class `.item-has-focus` but with `ion-select` I'm having some issues to detect when to know it's focused without using JavaScript.

Is there a way to achieve this without having to change my element and using a regular `<select>`?

My Code:

```
*HTML*
<ion-item lines="none">
    <ion-label class="label-class">Where is your location?</ion-label>
    <ion-select interface="popover" name="location" ngControl="location">
       <ion-select-option *ngFor="let location of locations" value="{{location.value}}">{{location.text}}</ion-select-option>
    </ion-select>
</ion-item>

*CSS*
.label-class{
   color: #a6a5a5;
   pointer-events: none;
   position: absolute;
   top: calc(50% - 25px);
   left: 10px;
   transition: all 0.1s linear;
   background-color: white;
   padding-top: 5px;
   padding-left: 4px;
   padding-right: 4px;
   box-sizing: border-box;
   font-size: 15px;
   z-index: 2;
}

```

This make the label to be readable inside the input, but when people click on it (on focus) I want to move it up.