html - 如何使需要的元素(在 html 中)不显示为必需的(在 css 中)

Question

所以我想使必需的 HTML 元素(红色)具有非必​​需元素(灰色)的外观，直到按下提交按钮。按下提交按钮后，它应该作为必需元素出现。

希望这不是模糊的。

让我尝试更好地解释我所追求的。由于所需的效果，我现在拥有的是所需的输入字段一直是桃色。我想要完成的是桃色仅在按下提交按钮时出现在所需的输入元素上。

那么基本上，我如何在有效和无效的不同阶段更改输入的大纲？我需要为此使用 javascript 还是有更简单的解决方案？ pleeeeeaseeeee help meeeeeee ....这让我发疯。

.form_text_input
{

  display: inline-flex;
  width: 95%;
  padding: 8px;
  font-family: inherit;
  font-size: 11pt;

}

.form_text_input:required:invalid
{

  outline-width: 1px;
  outline-style: solid;
  outline-color: #ffbda6;

}

<label class = "form_text_label">
      First Name: 
    </label>
    <input class = "form_text_input" type = "text" placeholder = "Your first   name...">
    <label class = "form_text_label">
     Last Name: * 
    </label>
    <input class = "form_text_input" type = "text" placeholder = "Your last name..." required>
    <label class = "form_text_label">
    Message: *
    </label>
    <textarea class = "form_text_input" placeholder = "Your message here..." required></textarea>
    <button class = "form_text_submit" type = "submit">
     Send &#9656;
    </button>

如果查看代码，我希望“消息”或“姓氏”所需的输入元素显示为“名字”输入元素，直到按下提交按钮。

非常感谢您的帮助，如果这是一个愚蠢的问题，我深表歉意。

Answer 1

:required 伪类选择器允许选择具有 required 属性的元素。

因此，只需从您的 CSS 中删除 .form_text_input:required:invalid 部分:

.form_text_input
{
    display: inline-flex;
    width: 95%;
    padding: 8px;
    font-family: inherit;
    font-size: 11pt;
}
/* REMOVE THIS PART
.form_text_input:required:invalid
{
    outline-width: 1px;
    outline-style: solid;
    outline-color: #ffbda6;
}*/

<label class = "form_text_label">First Name:</label>
<input class = "form_text_input" type = "text" placeholder = "Your first   name...">
<label class = "form_text_label">Last Name: *</label>
<input class = "form_text_input" type = "text" placeholder = "Your last name..." required>
<label class = "form_text_label">Message: *</label>
<textarea class = "form_text_input" placeholder = "Your message here..." required></textarea>
<button class = "form_text_submit" type = "submit">Send &#9656;</button>