我正在尝试弄清楚如何使此代码在IE和Edge中工作。它在Chrome和Firefox中完美运行,看起来也不错。我知道它可能处理了浏览器对显示的:placeholder-show的支持,但是我不确定并且无法弄清楚。显然,如果您在Edge中运行它,标签不会浮起来,而在您键入时,它只会出现在标签顶部。如果有人可以帮助,这是我正在使用的代码:
这里是原始来源:https://jsfiddle.net/7z8q4pyd/
CSS
:root {
--input-padding-x: .75rem;
--input-padding-y: .75rem;
}
.form-signin {
width: 100%;
padding: 15px;
margin: 0 auto;
}
.form-label-group {
position: relative;
margin-bottom: 1rem;
}
.form-label-group > input,
.form-label-group > label {
padding: var(--input-padding-y) var(--input-padding-x);
}
.form-signin select{
display: block;
width: 100%;
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: .25rem;
}
.form-label-group > label {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
margin-bottom: 0; /* Override default `<label>` margin */
line-height: 1.5;
color: #495057;
border: 1px solid transparent;
border-radius: .25rem;
transition: all .1s ease-in-out;
}
.form-label-group input::-webkit-input-placeholder {
color: transparent;
}
.form-label-group input:-ms-input-placeholder {
color: transparent;
}
.form-label-group input::-ms-input-placeholder {
color: transparent;
}
.form-label-group input::-moz-placeholder {
color: transparent;
}
.form-label-group input::placeholder {
color: transparent;
}
.form-label-group input:not(:placeholder-shown) {
padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));
padding-bottom: calc(var(--input-padding-y) / 3);
}
.form-label-group input:not(:placeholder-shown) ~ label {
padding-top: calc(var(--input-padding-y) / 3);
padding-bottom: calc(var(--input-padding-y) / 3);
font-size: 12px;
color: #777;
}
HTML
<form class="form-signin" action="" method="post">
<div class="row">
<div class="col-xs-12 col-md-6">
<div class="form-label-group">
<input type="text" name="fullname" id="inputName" class="form-control" placeholder="Full Name" required >
<label for="inputName">Full Name</label>
</div>
</div>
</div>
....
</form>
我用此替换了最后两个css样式,并且获得了与所有浏览器相同的效果。
.form-label-group input:not(:placeholder-shown) ~ label {
top: -13px;
font-size:12px;
}
.form-label-group input:focus + label{
top: -13px;
font-size:12px;
}
input:valid + label {
top: -13px;
font-size:12px;
}