将标签链接到 html/css 中的焦点输入限制的问题

如何解决将标签链接到 html/css 中的焦点输入限制的问题

我在 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) 中添加一个空格以获得跨浏览器支持。