带有Internet Explorer的Css浮动标签无法正常工作 [英] Floating Label with Css not working in edge, internet explorer

问题描述

我使用Css制作了浮动标签"输入字段，它可以与chrome，firefox正常使用，但不能与Internet Explorer和Edge一起使用.

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

所有其他浏览器在未聚焦时显示的输入字段与第一幅图像相同，在聚焦时显示的输入字段与第二幅图像相同. Internet Explorer和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.

这是我的代码段.

.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.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"/>
    		<span> FIRST NAME 
    				<sup>
    					 <font color="red" class="imp" >*</font>
    				</sup>
    		</span>
    	</label>
  </div>
</div>


<code>
 </code>

推荐答案

这是我的解决方案， 该代码运行良好，并提供了所有浏览器所需的相同功能.

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

将必需标签添加到html的输入字段中. 例子:

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>

这篇关于带有Internet Explorer的Css浮动标签无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！