How to do floating of labels in CSS

Question

I want to display the label of an input inside its input, so that when I click the input, the label will animate and go above the input and change the styles of the input\'s bor

Answer 1

I Hope this will also help you.

The input animation happens when we add required attribute in it, this can be done without adding required attribute also.

HTML

    
      
      
      Text
    

    
      
      
      Time
    

    
      
      
      Date
    

    
      
      
      Password
    

    
  
      
        
        Alabama
        Boston
        Ohaio
        New York
        Washington
      
      Select
    

    
      
      
      Textarea
    

CSS

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

.floating-input , .floating-select {
  font-size:14px;
  padding:4px 4px;
  display:block;
  width:180px;
  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:focus ~ label , .floating-select:not([value=""]):valid ~ label {
  top:-18px;
  font-size:14px;
  color:#5264AE;
}

.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; 
}

DEMO

Floating Label's - Pure CSS - without Required*