我想在输入的顶部获取标签。但是当我在代码中向上移动它时,CSS Focus 样式停止工作。在焦点上,标签需要变大。如何解决这个问题?尝试了一切...
form {
margin-top: 25px;
}
input {
display:block;
}
form input:focus + label {
font-size: 1.5em;
}
<form>
<!-- DOESN'T WORK
=====================
-->
<label for="firstname">First name:</label>
<input id="firstname" name="firstname" type="text">
<br>
<!-- WORKS
=====================
-->
<input id="lasttname" name="firstname" type="text">
<label for="lasttname">Last name:</label>
</form>
最佳答案
尝试将标签和输入包裹在额外的div
中,并使用flex-box
:
form {
margin-top: 25px;
}
form input:focus + label {
font-size: 1.5em;
}
.form-row {
display: flex;
flex-direction: column;
margin-bottom: 8px;
}
.form-row label {
order: 1;
}
.form-row input {
order: 2;
width: 141px;
}
<form>
<!-- DOESN'T WORK
=====================
-->
<div class='form-row'>
<input id="firstname" name="firstname" type="text">
<label for="firstname">First name:</label>
</div>
<!-- WORKS
=====================
-->
<input id="lasttname" name="firstname" type="text">
<label for="lasttname">Last name:</label>
</form>
关于html - 无法获得标签和输入以专注于工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36400631/