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

Create Directive for placeholder selector and handle adding and removing class for floating label as below

 @Directive({
       selector:"[placeholder]"
    })
    export class PlaceHolderShownDirective 
    implements 
    DoCheck {
     constructor(private el:ElementRef, private renderer:Renderer2){

    }

    ngDoCheck():void {

    this.modify();
    }



    modify() {
element=this.el.nativeElement;
           const labelSibling = this.renderer.nextSibling(element);
            labelSibling.classList[element.value?"add":"remove"]("placeholder-shown");
            }   

        }

/// CSS

label.placeholder-shown {
  font-size:12px;
  top: -12px;
  background: #04031d;
  padding:5px;
  margin: 0 0 0 8px;
  color: #fff;
}

.form-control:focus + label, .form-control:focus + label.placeholder-shown {
  font-size:12px;
  top: -12px;
  background: #04031d;
  padding:5px;
  margin: 0 0 0 8px;
  color: #fff;
}

For Firefox version <51 placeholder:shown support is not there so add directive based on below condition

 //AppModule ts



     const userAgent = window.navigator.userAgent;
        const isFireFox = /msie\s|trident\/|firefox\//i.test(userAgent);

        // Add directive based on condition
        declaration : [
        ...
        ...
        isFirefox ? PlaceHolderShownDirective : []
    ]

Css will be added based on input value and floating label will work in firefox version < 51 and ie browsers

/// HTML
<input placeholder=" " name="password" type="password" class="form-control"/>
<label class="form-control-placeholder" for="password">Password</label>

Answer 2

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

<div class="fNameSection_class col-sm-6">
  <div class="formatting ">
    <label class="has-float-label">
    		<input type = "text" id="first_name" name="fname" placeholder="Enter your First Name" required="required" autofocus="autofocus" required/>
    		<span> FIRST NAME 
    				<sup>
    					 <font color="red" class="imp" >*</font>
    				</sup>
    		</span>
    	</label>
  </div>
</div>


<code>
 </code>

Answer 3

Here is my solution, This Code is working fine and providing the same functionality as needed in all the browsers.

Add Required tag to the input field in html. example :

  .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,
.has-float-label select:invalid:not(:focus)::-webkit-input-placeholder,
.has-float-label textarea:invalid:not(:focus)::-webkit-input-placeholder {
  opacity: 0;
}

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

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

.has-float-label input:invalid:not(:focus)::placeholder,
.has-float-label select:invalid:not(:focus)::placeholder,
.has-float-label textarea:invalid: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;
}

<div class="fNameSection_class col-sm-6">		 
    <div class="formatting ">
    	<label  class="has-float-label">
    			<input type = "text" id="first_name" name="fname" placeholder="Enter your First Name" autofocus="autofocus" required>
    			<span> FIRST NAME 
    				<sup>
    					<font color="red" class="imp" >*
                        </font>
    			</sup>
    		</span>
    	</label>
   </div>
</div>

Answer 4

For me, I am using Angular 7 and I found a fix that works for all browsers (but again is only in Angular as far as I know). Essentially, I had this code that worked fine in Chrome/Firefox:

input:not(:placeholder-shown) + span {
    color: blue;
    transform: translateY(-1.25rem) scale(0.75);
}

It created a floating blue label when a value in the input is entered/exists. To get it to work in Edge, I replaced the code above and made a new scss class:

.entered-value + span {
    color: blue;
    transform: translateY(-1.25rem) scale(0.75);
}

and added an [Ngclass] on the input itself that creates that class when a value exists on the input (where the value of the input is modeled to the value variable in the angular component).

<input [ngClass]="{'entered-value': value}" 
       [(ngModel)]="value"
...

Hope this helps someone.