我正在使用 html 和 css 进行新登录，我想对我放置在输入顶部的标签产生影响。当输入为 :focus 和 :valid 时，标签会稍微移到顶部并更改字体大小，但是当我为 :valid 部分添加我想要的所有 css 属性时，它会注册为输入有效时从字面上看，那里根本没有文字。顺便说一句，我正在使用 chrome。
我已经尝试定位并在网上寻找一些答案，但找不到任何答案。
这是我的 html 代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main-container">
<div class="container">
<p>login</p>
<form>
<div class="txtb">
<input type="text">
<label>username</label>
</div>
<div class="txtb">
<input type="password">
<label>password</label>
</div>
</form>
</div>
</div>
</body>
</html>
这是我的 CSS:
body {
margin: 0;
padding: 0;
font-family: Helvetica, Arial, sans-serif;
}
.container .txtb label,
.container p {
text-transform: capitalize;
color: white;
}
.container,
.main-container {
border-radius: 10px;
}
.container {
position: relative;
background-color: rgba(0, 0, 0, .35);
width: 100%;
height: 100%;
transition: .4s;
}
.container:hover {
background-color: rgba(0, 0, 0, .5);
}
.main-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-image: url('/images/bg-img.png');
background-position: center;
width: 300px;
height: 500px;
}
.container p {
margin: 0;
text-align: center;
padding-top: 70px;
padding-bottom: 25px;
-webkit-text-stroke: 1px black;
font-size: 50px;
}
.container .txtb {
position: relative;
margin: 15px 40px 0 40px;
}
.container .txtb input {
padding: 10px;
width: 195px;
background: transparent;
border: none;
border-bottom: 2px solid black;
outline: 0;
}
.container .txtb label {
position: absolute;
top: 12px;
left: 1px;
pointer-events: none;
transition: .3s;
}
.container .txtb input:focus ~ label,
.container .txtb input:valid ~ label {
top: -10px;
font-size: 13px;
}
我期待这个问题的一些好的答案和/或解决方案。如果没有解决方案，我很乐意得到一些说明。
最佳答案
您的输入都没有 required 或 pattern 属性或任何其他会施加有效性条件的特征。
它们都是总是有效的，所以 :valid 伪类适用。
MDN 有 an introduction to form validity这将帮助您使用这些属性来应用您想要的任何有效性规则。
关于html - :valid ~ label is not working, 输入 html 元素无效但按原样注册，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57242244/