javascript - Floating Label with Css not working in edge, internet explorer

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 browsers show input field same as shown in first image when not focused and like second image when focused. Internet explorer and edge always show the input field like 2nd image.

Here is snippet of my code.

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

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

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

.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:placeholder-shown:not(:focus)+*,
.has-float-label select:placeholder-shown:not(:focus)+*,
.has-float-label textarea:placeholder-shown: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='' 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"/>
    		<span> FIRST NAME 
    				<sup>
    					 <font color="red" class="imp" >*</font>
    				</sup>
    		</span>
    	</label>
  </div>
</div>


<code>
 </code>

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 browsers show input field same as shown in first image when not focused and like second image when focused. Internet explorer and edge always show the input field like 2nd image.

Here is snippet of my code.

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

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

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

.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:placeholder-shown:not(:focus)+*,
.has-float-label select:placeholder-shown:not(:focus)+*,
.has-float-label textarea:placeholder-shown: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/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"/>
    		<span> FIRST NAME 
    				<sup>
    					 <font color="red" class="imp" >*</font>
    				</sup>
    		</span>
    	</label>
  </div>
</div>


<code>
 </code>

Share Improve this question edited Feb 8, 2018 at 7:26 Niveditha Karmegam 7401 gold badge12 silver badges28 bronze badges asked Feb 8, 2018 at 7:18 Bhuvan Arora 1542 silver badges13 bronze badges

I found on web that i used ""input:placeholder-shown"" in my code which has no browser support for edge and IE. Any alternate for ""input:placeholder-shown"" are weled here.. – Bhuvan Arora Commented Feb 8, 2018 at 7:48
I think :empty will get you close... – JasonB Commented Feb 8, 2018 at 7:56
1 @JasonB it doesn't work. if you have solution can u please elaborate it. – Bhuvan Arora Commented Feb 8, 2018 at 8:23
1 @JasonB :empty is for an empty tag, like <div></div> (not sure about <div> </div>, which contains a space textnode), not for an input with no value. – massic80 Commented Jul 30, 2019 at 16:10

Add a ment |

4 Answers 4

Sorted by: Reset to default 2

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/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>

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/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>

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 ponent).

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

Hope this helps someone.

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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Floating Label with Css not working in edge, internet explorer - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)