Floating Label with Css not working in edge, internet explorer

Question

I made Floating Label input field using Css it is working properly with chrome, firefox but not working with internet explorer and edge.

All other

Answer 1

Adding required to your input allowed me to use the :invalid pseudo-element in place of :placeholder-shown. It didn't get everything working perfectly with the placeholder styles but now you should see the Label animation triggered in IE.

I'd say, update your code and see if you can narrow the problems down to smaller elements of the whole UI that you have here to see if anyone can fix one thing at a time.

.has-float-label {
  display: block;
  position: relative;
}

.has-float-label label,
.has-float-label>span {
  color: grey;
  position: absolute;
  left: 0;
  top: 0;
  cursor: text;
  font-size: 120%;
  opacity: 1;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.has-float-label select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.has-float-label textarea {
  width: 100%;
}

.has-float-label input,
.has-float-label select,
.has-float-label textarea {
  font-size: 15px;
  font-weight: normal !important;
  padding-top: 1.3em;
  margin-bottom: 2px;
  border: 0;
  height: 45px;
  border-radius: 0;
  border-bottom: 2px solid rgba(0, 0, 0, .1);
}

.has-float-label input::-webkit-input-placeholder,
.has-float-label select::-webkit-input-placeholder,
.has-float-label textarea::-webkit-input-placeholder {
  opacity: 1;
  -webkit-transition: all .2s;
  transition: all .2s;
}

.has-float-label input::-moz-placeholder,
.has-float-label select::-moz-placeholder,
.has-float-label textarea::-moz-placeholder {
  opacity: 1;
  transition: all .2s;
}

.has-float-label input:-ms-input-placeholder,
.has-float-label select:-ms-input-placeholder,
.has-float-label textarea:-ms-input-placeholder {
  opacity: 1;
  transition: all .2s;
}

.has-float-label input::placeholder,
.has-float-label select::placeholder,
.has-float-label textarea::placeholder {
  opacity: 1;
  -webkit-transition: all .2s;
  transition: all .2s;
}

.has-float-label input:invalid:not(:focus)::-webkit-input-placeholder {
  opacity: 0;
}

.has-float-label input:invalid:not(:focus)::-moz-placeholder {
  opacity: 0;
}

.has-float-label input:focus:-ms-input-placeholder {
  opacity: 0;
}

.has-float-label input:invalid:not(:focus):-ms-input-placeholder {
  color:transparent;
}

.has-float-label input:placeholder-shown:not(:focus)::placeholder,
.has-float-label select:placeholder-shown:not(:focus)::placeholder,
.has-float-label textarea:placeholder-shown:not(:focus)::placeholder {
  opacity: 0;
}

.has-float-label input:invalid:not(:focus)+*,
.has-float-label select:invalid:not(:focus)+*,
.has-float-label textarea:invalid:not(:focus)+* {
  font-size: 140%;
  opacity: .5;
  top: 1.3em;
}

.has-float-label input:focus,
.has-float-label select:focus,
.has-float-label textarea:focus {
  outline: 0;
  border-color: #4285f4;
}

.has-float-label select {
  padding-right: 1em;
  background: url("data:image/svg+xml);
 charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .5em bottom .25em;
 background-size: 8px 10px;
}

  

    
    		
    		 FIRST NAME 
    				
    					 *