的问题链接标签集中的输入限制在html / css

Question

我创建了一个表单提交html/css…请点击下面的链接查看https://codepen.io/letsimoo/pen/PobxGRG

<

HTML代码/h2>

<form action="">
<div class="container">
<input class="required-input" type="text" id="name" required />
<label class="required-label" for="name">Name:</label>
</div>
<div class="container">
<input class="required-input" type="text" id="email" required />
<label class="required-label" for="email">Email:</label>
</div>

<div class="container" >
<input class="not-required-input" type="text" id="budget"/>
<label class="not-required-label" for="budget">Budget:</label>  
</div>


<div class="container">
<input class="required-input" type="text" id="Message" required  style="height: 100px"/>
<label class="required-label" for="Message">Message:</label>    
</div>
<input type="submit" value="Submit">  
</form>

CSS代码

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600);
* {
box-sizing: border-box;
}
/*Just to center the Form*/
form {
height: 100%;
width: 400px;
overflow: auto;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/* A container to position LABELS */
.container {
position: relative;
/*            top: auto;
left: auto;
width: auto; */
}
.required-input {
padding: 1em;
border: 1px solid #ccc;
-webkit-box-shadow: inset 0 1px 0 #eee, #fff 0 1px 0;
box-shadow: inset 0 1px 0 #eee, #fff 0 1px 0;
border-radius: 5px;
width: 100%;
background-color: black;
color: lightgray;
}
/* I put label on top of the input*/
.required-label {
position: absolute;
top: 0;
right: 1px;
bottom: 1px;
left: 0.5em;
z-index: 1;
height: 1em;
font-size: 13px;
line-height: 3.5em;
color: #999;
white-space: nowrap;
cursor: text;
transition: all 0.1s ease;
font-family: "Open Sans", sans-serif;
height: 100%;
}
/*      making exception for Budget */
.not-required-input {
padding: 1em;
border: 1px solid #ccc;
-webkit-box-shadow: inset 0 1px 0 #eee, #fff 0 1px 0;
box-shadow: inset 0 1px 0 #eee, #fff 0 1px 0;
border-radius: 5px;
width: 100%;
background-color: black;
color: lightgray;
}
.not-required-label {
position: absolute;
top: 0;
right: 1px;
bottom: 1px;
left: 0.5em;
z-index: 1;
height: 1em;
font-size: 13px;
line-height: 3.5em;
color: #999;
white-space: nowrap;
cursor: text;
transition: all 0.1s ease;
font-family: "Open Sans", sans-serif;
height: 100%;
}
.required-input:focus ~ .required-label,
.required-input:valid ~ .required-label {
font-size: 9px;
font-weight: bold;
left: 5px;
top: -5px;
}
/*      making exception for Budget */
.not-required-input:focus ~ .not-required-label,
.not-required-input:invalid ~ .not-required-label {
font-size: 9px;
font-weight: bold;
left: 5px;
top: -5px;
}
.required-input:valid ~ .required-label {
color: #497495;
}
.required-input:focus:invalid ~ .required-label {
color: red;
}
.required-input:required ~ .required-label::before {
content: "*";
color: red;
}
.required-input:required:valid ~ .required-label::before {
color: #497495;
}

我在这个表单中面临的唯一问题是，当选择(非必需的)字段(预算)时，正如您在该字段中完成写作后在链接中看到的那样，或者在它不集中之后，标签回到其旧位置和值!

你能帮我找出元素选择的错误在哪里，我该怎么做吗?

p。当我将(预算)的输入限制设置为*required时，它将不会有任何问题!

Answer 1

对于不能无效的元素，您有:invalid。因为它没有required，所以它总是会变成invalid。我的答案来自这个博客。

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600);
* {
box-sizing: border-box;
}
/*Just to center the Form*/
form {
height: 100%;
width: 400px;
overflow: auto;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/* A container to position LABELS */
.container {
position: relative;
/*            top: auto;
left: auto;
width: auto; */
}
/*      making exception for Budget */
.not-required-input {
padding: 1em;
border: 1px solid #ccc;
-webkit-box-shadow: inset 0 1px 0 #eee, #fff 0 1px 0;
box-shadow: inset 0 1px 0 #eee, #fff 0 1px 0;
border-radius: 5px;
width: 100%;
background-color: black;
color: lightgray;
}
.not-required-label {
position: absolute;
top: 0;
right: 1px;
bottom: 1px;
left: 0.5em;
z-index: 1;
height: 1em;
font-size: 13px;
line-height: 3.5em;
color: #999;
white-space: nowrap;
cursor: text;
transition: all 0.1s ease;
font-family: "Open Sans", sans-serif;
height: 100%;
}
/*      making exception for Budget */
.not-required-input:focus ~ .not-required-label,
.not-required-input:invalid ~ .not-required-label,
.not-required-input:not(:placeholder-shown) ~ .not-required-label {
font-size: 9px;
font-weight: bold;
left: 5px;
top: -5px;
}

<form action="">
<div class="container" >
<input class="not-required-input" type="text" id="budget" placeholder=""/>
<label class="not-required-label" for="budget">Budget:</label>  
</div>
<input type="submit" value="Submit">  
</form>

我所做的是添加.not-required-input:not(:placeholder-shown) ~ .not-required-label到您的CSS和placeholder=""到HTML。当然，当用户输入input时，占位符就消失了，所以当用户输入输入时，伪:not(:placeholder-shown)将被触发。我只在Firefox中测试过，但它应该适用于所有浏览器。如果需要，您可以在placeholder中添加一个空格以支持跨浏览器。