问题描述
我在 html/css 上创建了一个表单提交...请在下面的链接中查看 https://codepen.io/letsimoo/pen/PobxGRG
HTML 代码
<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;
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;
}
我在此表单中面临的唯一问题是,在完成该字段中的书写后或在该字段未聚焦后选择(非必填)字段(如您在链接中看到的(预算))时,标签返回到它的旧位置和价值!
你能帮我找出元素选择中的错误在哪里吗?我该怎么办?
附言。当我将(Budget)的输入限制设置为 *required 时,它不会有任何问题!
解决方法
您有一个不能无效的元素的 const App = (props) => {
useEffect(() => {
props.getConfigState();
props.getDataState();
props.getGameState();
},[]);
return (
//JSX//
);
}
export default compose(connect(null,{ getConfigState,getDataState,getGameState }))(App);
。由于它没有 :invalid
,所以它总是以 required
的形式出现。我的回答来自this blog。
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>
添加到您的 CSS 并将 .not-required-input:not(:placeholder-shown) ~ .not-required-label
添加到 HTML。当然,当用户输入 placeholder=""
时,占位符会消失,因此当用户输入输入时,伪 input
将被触发。我只在 Firefox 中测试过这个,但它应该适用于所有浏览器。如果需要,您可以在 :not(:placeholder-shown)
中添加一个空格以获得跨浏览器支持。