title: Ionic - select on 'focus' with CSS
body: <p>Is there a way to know via CSS when a <code>&lt;ion-select&gt;</code> element is on focus?</p>
  <p>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 <code>ion-input</code>, by using the class <code>.item-has-focus</code> but with <code>ion-select</code> I'm having some issues to detect when to know it's focused without using JavaScript.</p>
  <p>Is there a way to achieve this without having to change my element and using a regular <code>&lt;select&gt;</code>?</p>
  <p>My Code:</p>
  <pre><code>*HTML*
  &lt;ion-item lines=&quot;none&quot;&gt;
      &lt;ion-label class=&quot;label-class&quot;&gt;Where is your location?&lt;/ion-label&gt;
      &lt;ion-select interface=&quot;popover&quot; name=&quot;location&quot; ngControl=&quot;location&quot;&gt;
         &lt;ion-select-option *ngFor=&quot;let location of locations&quot; value=&quot;{{location.value}}&quot;&gt;{{location.text}}&lt;/ion-select-option&gt;
      &lt;/ion-select&gt;
  &lt;/ion-item&gt;
  
  *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;
  }
  </code></pre>
  <p>This make the label to be readable inside the input, but when people click on it (on focus) I want to move it up.</p>