问题描述
我正在处理现有表单,我想在其中引入浮动标签。
我在堆栈溢出方面看到的许多解决方案都很棒,但需要 label
标签直接位于 <input>
标签下方。 For example here。
在我正在处理的表单上,我的 label
标签位于 <input>
标签上方。而输入标签,位于一个单独的 div 中。 (我不允许移动这些标签 - 请不要问,应用程序的限制!)。
无论如何,我可以用这种结构实现浮动CSS标签吗?
.test-field {
clear: both;
margin-bottom: 20px;
position: relative;
}
.test-field__input {
font-size: 0.875em;
line-height: 1;
-moz-appearance: none;
-webkit-appearance: none;
background-color: #f5f5f5;
border: 2px solid #eee;
border-radius: 4px;
color: grey;
height: calc((40 / 14) * 1em);
line-height: 1;
outline: 0;
padding: 0 8px;
vertical-align: top;
width: 100%;
}
/* // FOCUS */
.test-field__input:focus,.test-field__input ~ input:checked:focus {
border-color: #5d7199;
}
/* // disABLED */
.test-field--disabled .test-field__input {
background-color: #e8e8e3;
cursor: not-allowed;
}
.test-field--disabled .test-field__flag,.test-field--disabled .test-field__label {
color: #d0d0cb;
}
/* // ERROR */
.test-field--error .test-field__input,.test-field--error .test-field__selection .atc-field__input {
border-color: #ff4436;
color: #ff4436;
}
/* // FLOATING LABEL */
.test-field--floating .test-field-input {
position: relative;
margin-bottom: 1.5rem;
}
.test-field__label {
position: absolute;
top: 0;
padding: 7px 0 0 13px;
transition: all 200ms;
opacity: 0.5;
}
.test-field__input:focus + .test-field__label,.test-field--floating .test-field__input:valid + .test-field__label {
font-size: 75%;
transform: translate3d(0,-100%,0);
opacity: 1;
}
<div class="test-field test-field--floating">
<label for="a" class="test-field__label">Input label</label>
<input class="test-field__input" id="b" type="text" value="" required>
</div>
解决方法
这似乎是复制浮动标签的好方法,具有类似的 DOM 结构:
const floatField = document.querySelectorAll('.ej-form-field-input-textbox');
const floatContainer = document.querySelectorAll('.ej-form-field');
for (let i = 0; i < floatField.length; i++) {
floatField[i].addEventListener('focus',() => {
floatContainer[i].classList.add('active');
});
};
for (let i = 0; i < floatField.length; i++) {
floatField[i].addEventListener('blur',() => {
floatContainer[i].classList.remove('active');
});
};
.ej-form-field {
border: solid 1px #ccc;
padding: 0 8px;
position: relative;
}
.ej-form-field input {
border: 1px solid red;
font-size: 16px;
outline: 0;
height: 30px;
/* padding: 16px 0 10px; */
}
label {
font-size: 16px;
position: absolute;
transform-origin: top left;
transform: translate(0,16px) scale(1);
transition: all .1s ease-in-out;
height: 40px;
}
.ej-form-field.active label {
transform: translate(0,-6px) scale(.95);
color: red;
margin-left: 10px;
background-color: #fff;
border: 1px solid green;
height: 20px;
}
<div id="floatContainer" class="ej-form-field">
<label for="floatField">First name</label>
<div>
<input id="floatField" class="ej-form-field-input-textbox" type="text">
</div>
</div>
<div id="floatContainer" class="ej-form-field">
<label for="floatField">Last name</label>
<div>
<input id="floatField" class="ej-form-field-input-textbox" type="text">
</div>
</div>