当我聚焦时，我试图将标签移动到输入字段上方，但它被隐藏了

Question

当我聚焦时，我试图将标签移动到输入字段上方，但它被隐藏了。

label > span::focus  {
top: -20px; 
font-size: 15px;
color: blue;           
} 

完整的 HTML 和 CSS 代码。

更新：

我想通了，我只是将一些HTML类和东西更改为：

.user-input:focus + .user-label > span { 
margin-top: -15px;
font-size: 10px;
color: blue;      

Answer 1

我认为你需要这样的东西

* {
	box-sizing: border-box;
}
.group {
	position: relative;
	margin-bottom: 45px;
	margin-top: 45px;
}
input {
	font-size: 18px;
	padding: 10px 10px 10px 5px;
	display: block;
	width: 300px;
	border: none;
	border-bottom: 1px solid #757575;
}
input:focus {
	outline: none;
}
label {
	color: #999;
	font-size: 18px;
	font-weight: normal;
	position: absolute;
	pointer-events: none;
	left: 5px;
	top: 10px;
	transition: 0.2s ease all;
	-moz-transition: 0.2s ease all;
	-webkit-transition: 0.2s ease all;
}
input:focus~label,
input:valid~label {
	top: -20px;
	font-size: 14px;
	color: #5264AE;
}
input:focus~.bar:before,
input:focus~.bar:after {
	width: 50%;
}
.highlight {
	position: absolute;
	height: 60%;
	width: 100px;
	top: 25%;
	left: 0;
	pointer-events: none;
	opacity: 0.5;
}
/* active state */
input:focus~.highlight {
	-webkit-animation: inputHighlighter 0.3s ease;
	-moz-animation: inputHighlighter 0.3s ease;
	animation: inputHighlighter 0.3s ease;
}
/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
	from {
		background: #5264AE;
	}
	to {
		width: 0;
		background: transparent;
	}
}
@-moz-keyframes inputHighlighter {
	from {
		background: #5264AE;
	}
	to {
		width: 0;
		background: transparent;
	}
}
@keyframes inputHighlighter {
	from {
		background: #5264AE;
	}
	to {
		width: 0;
		background: transparent;
	}
}

<form>

<div class="group">      
<input type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Name</label>
</div>

<div class="group">      
<input type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Email</label>
</div>

</form>

Answer 2

正如我在评论中所说： 你不能previous sibling选择器(label(的样式focus下一个(input(

因此，您必须在html中设置input后的label并设置position:relative而不是absolute

请参阅代码：

body {
background-color: #f0f0f0;
}
form {
margin-left: 39%;
margin-top: 9%;
}
label {
position: relative;
margin-left: 0%; 
font-family: monospace, 'Montserrat', sans-serif;
font-size: 15px;
padding-top: 3px; 
/* border: 5px solid black;*/ 
}
.head {
margin-left: 43%;
margin-top: 5%;
font-size: 25px;
font-family: monospace;
}
.password {
margin-top: 5%; 
}
.input-field {
position: absolute;
background: transparent;
border-width: 2px;
border-top: 0;
border-left: 0;
border-right: 0;
background: transparent;
outline: 0;
height: 23px;
border-color: black;
width: 180px;
} 
input:focus {
background: #fae596;
border: 0;
}
input:focus + .label   {
top:-20px; 
font-size: 15px;
color: blue;           /* font color while on top */
}

<p class="head">Sign In</p>
<form>
<div class="username">	

<input type="text" name="name" class="input-field" id="user"/> <!--input filed-->
<label for="user" class="label"><span>Username</span></label>
</div>
<br>
<br>
<div class="password">
<input type="text" name="name" class="input-field" id="pass" />
<label for="pass" class="label"><span>Password</span></label>
</div>


</form>