Question

因此，我想使所需的HTML元素（红色）具有不需要的元素（灰色）的外观，直到按下提交按钮为止。按下提交按钮后，它应显示为必填元素。

希望这并不含糊。

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

因此，基本上，如何在有效和无效的不同阶段更改输入的轮廓？我需要为此使用JavaScript还是有更简单的解决方案？ pleeeeeaseeeee帮助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伪类选择器允许选择具有必需属性的元素。

因此，只需从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>

如何使所需元素（在html中）不显示为必需元素（在css中）

1 个答案: