CSS-Only Floating Labels for "Select" Tags

Question

I'd like to apply the principles of floating labels as demonstrated in the below code:

.form-control:focus + .form-control-placeholder,
.form-control:valid + .form-control-placeholder {
    font-size: 75%;
    transform: translate3d(0, -100%, 0);
    opacity: 1;
}

to 'select' tags. As of now, I have attempted to combine the following HTML:

 <select id = "type" name = "type" class = "form-control" autocomplete = "off" required style = "margin-top: 20px;">
                            <option selected disabled hidden id = "inputLab">Option</option>
                            <option value = "1">1</option>
                            <option value = "2">2</option>
                        </select>

and CSS:

select:focus + #inputLab,
select:valid + #inputLab {
    font-size: 75%;
    transform: translate3d(0, -100%, 0);
    opacity: 1;
}

with no success. How would I go about accomplishing this? Thanks.

Answer 1

Try this:

.floating-form {
  width: 320px;
}

.floating-label {
  position: relative;
  margin-bottom: 20px;
}

.floating-input,
.floating-select {
  font-size: 14px;
  padding: 4px 4px;
  display: block;
  width: 100%;
  height: 30px;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #757575;
}

.floating-input:focus,
.floating-select:focus {
  outline: none;
  border-bottom: 2px solid #5264AE;
}

label {
  color: #999;
  font-size: 14px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 5px;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}

.floating-input:focus~label,
.floating-input:not(:placeholder-shown)~label {
  top: -18px;
  font-size: 14px;
  color: #5264AE;
}
.floating-select:disabled ~ label {
  top:-18px;
  font-size:14px;
  color:#5264AE;
}

.floating-select:focus~label,
.floating-select:not([value=""]):valid~label {
  top: -18px;
  font-size: 14px;
  color: #5264AE;
}


/* active state */

.floating-input:focus~.bar:before,
.floating-input:focus~.bar:after,
.floating-select:focus~.bar:before,
.floating-select:focus~.bar:after {
  width: 50%;
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.floating-textarea {
  min-height: 30px;
  max-height: 260px;
  overflow: hidden;
  overflow-x: hidden;
}


/* highlighter */

.highlight {
  position: absolute;
  height: 50%;
  width: 100%;
  top: 15%;
  left: 0;
  pointer-events: none;
  opacity: 0.5;
}


/* active state */

.floating-input:focus~.highlight,
.floating-select:focus~.highlight {
  -webkit-animation: inputHighlighter 0.3s ease;
  -moz-animation: inputHighlighter 0.3s ease;
  animation: inputHighlighter 0.3s ease;
}


/* animation */

@-webkit-keyframes inputHighlighter {
  from {
    background: #5264AE;
  }
  to {
    width: 0;
    background: transparent;
  }
}

@-moz-keyframes inputHighlighter {
  from {
    background: #5264AE;
  }
  to {
    width: 0;
    background: transparent;
  }
}

@keyframes inputHighlighter {
  from {
    background: #5264AE;
  }
  to {
    width: 0;
    background: transparent;
  }
}

<center>
  <div class="floating-form">
    <div class="floating-label">
      <input class="floating-input" type="text" placeholder=" ">
      <span class="highlight"></span>
      <label>Text</label>
    </div>


    <div class="floating-label">
      <select disabled class="floating-select" onclick="this.setAttribute('value', this.value);" value="">
        <option value=""></option>
        <option selected value="1">Alabama</option>
        <option value="2">Boston</option>
        <option value="3">Ohaio</option>
        <option value="4">New York</option>
        <option value="5">Washington</option>
      </select>
      <span class="highlight"></span>
      <label>Select</label>
    </div>


  </div>
</center>

Source: https://codepen.io/dannibla/pen/amgRNR

Answer 2

Tested the above solution by Vikas Jadhav it works fine on desktop but doesn't work properly on mobile device browsers. I searched a lot on google as well but I was unable to find a pure CSS solution for it. I think without jQuery it isn't possible for touch-screen / mobile devices.