如果我不想为表单中的某些 HTML 输入标签设置必需的属性，我该怎么办？

Question

我有一个表单，您需要为某些输入指定 required 属性才能正常工作。

这是我的代码：

:root
{
  background-color: black;
}

form{
  background-color: purple;
}

.Comment-rows {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(161px, 1fr));
  transform: translateY(20px);
  transition: opacity 400ms ease-in, transform 300ms ease-in;
}

.Comment-rows .Comment-form {
  position: relative;
  width: 100%;
  padding: 0 10px;
  margin: 60px 0 10px;
  transition: 0.5s;
}

.Comment-rows .Comment-form .Comment-InputBox {
  position: relative;
  width: 100%;
  height: 40px;
  color: yellow;
}

.Comment-rows .Comment-form .Comment-InputBox input,
.Comment-rows .Comment-form .Comment-InputBox.textarea textarea {
  position: absolute;
  width: 100%;
  height: 100%;
  background: transparent;
  box-shadow: none;
  border: none;
  outline: none;
  font-size: 1.8rem;
  padding: 0 10px;
  z-index: 1;
  color: purple;
}

.Comment-rows .Comment-form .Comment-InputBox .Comment-text {
  position: absolute;
  top: 0;
  right: 0;
  line-height: 40px;
  font-size: 1.5rem;
  padding: 0 10px;
  display: block;
  transition: 0.5s;
  pointer-events: none;
}

.Comment-rows .Comment-form .Comment-InputBox input:focus+.Comment-text,
.Comment-rows .Comment-form .Comment-InputBox input:valid+.Comment-text {
  top: -35px;
  right: -10px;
}

.Comment-rows .Comment-form .Comment-InputBox .Comment-Line {
  position: absolute;
  bottom: 0;
  display: block;
  width: 100%;
  height: 2px;
  background: yellow;
  transition: 0.5s;
  border-radius: 2px;
  pointer-events: none;
}

.Comment-rows .Comment-form .Comment-InputBox input:focus~.Comment-Line,
.Comment-rows .Comment-form .Comment-InputBox input:valid~.Comment-Line {
  height: 100%;
}

/*textarea*/

.Comment-rows .Comment-form .Comment-InputBox.textarea {
  width: 100%;
  height: 100px;
  position: relative;
  padding: 10px 0;
}

.Comment-rows .Comment-form .Comment-InputBox.textarea textarea {
  height: 100%;
  resize: none;
  top: 0;
  right: 0;
}

.Comment-rows .Comment-form .Comment-InputBox textarea:focus+.Comment-text,
.Comment-rows .Comment-form .Comment-InputBox textarea:valid+.Comment-text {
  top: -35px;
  right: -10px;
}

.Comment-rows .Comment-form .Comment-InputBox textarea:focus~.Comment-Line,
.Comment-rows .Comment-form .Comment-InputBox textarea:valid~.Comment-Line {
  height: 100%;
}

/* Send button */

.Comment-form-Button{
  margin: 20px;
  display: block;
  padding: 5px;
}

.Comment-form-Button button{
  padding: 7px 16px;
}

<form>
  <div class="Comment-rows">
    <div class="Comment-form">
      <div class="Comment-InputBox">
        <input type="text" name="name" autocomplete="nope">
        <span class="Comment-text">name</span>
        <span class="Comment-Line"></span>
      </div>
    </div>
    <div class="Comment-form">
      <div class="Comment-InputBox">
        <input type="text" name="lastName">
        <span class="Comment-text">last name</span>
        <span class="Comment-Line"></span>
      </div>
    </div>
  </div>

  <div class="Comment-rows">
    <div class="Comment-form">
      <div class="Comment-InputBox">
        <input type="email" name="email" required="required" autocomplete="on" oninvalid="this.setCustomValidity('please enter your email')" oninput="this.setCustomValidity('')">
        <span class="Comment-text">email*</span>
        <span class="Comment-Line"></span>
      </div>
    </div>
    <div class="Comment-form">
      <div class="Comment-InputBox">
        <input type="text" name="phoneNumber">
        <span class="Comment-text">phone number</span>
        <span class="Comment-Line"></span>
      </div>
    </div>
  </div>

  <div class="Comment-rows">
    <div class="Comment-form">
      <div class="Comment-InputBox textarea">
        <textarea required="required" name="message" oninvalid="this.setCustomValidity('please enter your message')" oninput="this.setCustomValidity('')"></textarea>
        <span class="Comment-text">enter your message*</span>
        <span class="Comment-Line"></span>
      </div>
    </div>
  </div>

  <div class="Comment-form-Button">
    <button type="submit">
                        <span>Send</span>
                    </button>
  </div>
</form>

如果您注意 Snippet 结果，您会发现输入字段在获得焦点或有效时会获得一些样式。

只有两个输入字段具有 required 属性（电子邮件、消息）。该样式必须仅适用于 focused 和 valid 输入（具有 required 属性的输入）。

用户不必输入名字、姓氏和phone号码。它们是可选的。但是在这里，刷新页面后，“name, last name, phone number”输入字段将在实际获得焦点之前获得焦点样式！刷新页面后，它们必须表现得像“电子邮件和消息”。这意味着它们不应该从一开始就被关注，如果你注意，它们是唯一没有 required 属性的输入字段。

问题出在我的 CSS 中的 valid 属性。如果我删除它，那么代码将无法正常工作，如果我保留它，那么它不会将“姓名、姓氏、phone 数字”输入字段视为必填字段。所以它假设它们总是有效的。所以他们总是得到一个有效字段的样式，这不是我想要的。

我应该如何处理我的代码而不会对我的主要风格产生任何不利影响？

如能提供任何帮助，我们将不胜感激。

Answer 1

您可以让它仅将 :valid 选择器应用于具有 required 属性的元素：input[required]:valid

对于其他字段，如果它不为空，可以使用一个技巧来应用样式，方法是添加一个空的 placeholder=" " 属性并通过 :placeholder-shown 选择器检查它是否显示：

:root
{
  --our-purple-color: purple;
  background-color: black;
}
.Comment-rows {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(161px, 1fr));
/*  opacity: 0;*/
  transform: translateY(20px);
  transition: opacity 400ms ease-in, transform 300ms ease-in;
}

.Comment-rows .Comment-form {
  position: relative;
  width: 100%;
  padding: 0 10px;
  margin: 60px 0 10px;
  transition: .5s;
}

.Comment-rows .Comment-form .Comment-InputBox {
  position: relative;
  width: 100%;
  height: 40px;
  color: yellow;
}

.Comment-rows .Comment-form .Comment-InputBox input,
.Comment-rows .Comment-form .Comment-InputBox.textarea textarea {
  position: absolute;
  width: 100%;
  height: 100%;
  background: transparent;
  box-shadow: none;
  border: none;
  outline: none;
  font-size: 1.8rem;
  padding: 0 10px;
  z-index: 1;
  color: var(--our-purple-color);
}

.Comment-rows .Comment-form .Comment-InputBox .Comment-text {
  position: absolute;
  top: 0;
  right: 0;
  line-height: 40px;
  font-size: 1.5rem;
  padding: 0 10px;
  display: block;
  transition: .5s;
  pointer-events: none;
}

/* added */
.Comment-rows .Comment-form .Comment-InputBox input:not([required]):not(:placeholder-shown)+.Comment-text,

.Comment-rows .Comment-form .Comment-InputBox input:focus+.Comment-text,
/* changed */
.Comment-rows .Comment-form .Comment-InputBox input[required]:valid+.Comment-text {
  top: -35px;
  right: -10px;
}

.Comment-rows .Comment-form .Comment-InputBox .Comment-Line {
  position: absolute;
  bottom: 0;
  display: block;
  width: 100%;
  height: 2px;
  background: yellow;
  transition: .5s;
  border-radius: 2px;
  pointer-events: none;
}

/* added */
.Comment-rows .Comment-form .Comment-InputBox input:not([required]):not(:placeholder-shown)~.Comment-Line,

.Comment-rows .Comment-form .Comment-InputBox input:focus~.Comment-Line,
/* changed */
.Comment-rows .Comment-form .Comment-InputBox input[required]:valid~.Comment-Line {
  height: 100%;
}


/*textarea*/

.Comment-rows .Comment-form .Comment-InputBox.textarea {
  width: 100%;
  height: 100px;
  position: relative;
  padding: 10px 0;
}

.Comment-rows .Comment-form .Comment-InputBox.textarea textarea {
  height: 100%;
  resize: none;
  top: 0;
  left: 0;
}

/* added */
.Comment-rows .Comment-form .Comment-InputBox textarea:not([required]):not(:placeholder-shown)+.Comment-text,

.Comment-rows .Comment-form .Comment-InputBox textarea:focus+.Comment-text,
/* changed */
.Comment-rows .Comment-form .Comment-InputBox textarea[required]:valid+.Comment-text {
  top: -35px;
  left: -10px;
}

/* added */
.Comment-rows .Comment-form .Comment-InputBox textarea:not([required]):not(:placeholder-shown)~.Comment-line,

.Comment-rows .Comment-form .Comment-InputBox textarea:focus~.Comment-Line,
/* changed */
.Comment-rows .Comment-form .Comment-InputBox textarea[required]:valid~.Comment-Line {
  height: 100%;
}

<form autocomplete="off">
  <div class="Comment-rows">
    <div class="Comment-form">
      <div class="Comment-InputBox">
        <input type="text" name="name" autocomplete="nope" placeholder=" ">
        <span class="Comment-text">name</span>
        <span class="Comment-Line"></span>
      </div>
    </div>
    <div class="Comment-form">
      <div class="Comment-InputBox">
        <input type="text" name="lastName" placeholder=" ">
        <span class="Comment-text">last name</span>
        <span class="Comment-Line"></span>
      </div>
    </div>
  </div>

  <div class="Comment-rows">
    <div class="Comment-form">
      <div class="Comment-InputBox">
        <input type="email" name="email" required="required" autocomplete="on" oninvalid="this.setCustomValidity('')" oninput="this.setCustomValidity('')">
        <span class="Comment-text">email*</span>
        <span class="Comment-Line"></span>
      </div>
    </div>
    <div class="Comment-form">
      <div class="Comment-InputBox">
        <input type="text" name="phoneNumber" placeholder=" ">
        <span class="Comment-text">phone number</span>
        <span class="Comment-Line"></span>
      </div>
    </div>
  </div>

  <div class="Comment-rows">
    <div class="Comment-form">
      <div class="Comment-InputBox textarea">
        <textarea required="required" name="message" oninvalid="this.setCustomValidity('')" oninput="this.setCustomValidity('')"></textarea>
        <span class="Comment-text">enter your message*</span>
        <span class="Comment-Line"></span>
      </div>
    </div>
  </div>

  <div class="Comment-form-Button">
    <button type="submit" disabled>
                        <span>send</span>
                        <div class="liquid"></div>
                    </button>
  </div>
</form>

如果我不想为表单中的某些 HTML 输入标签设置必需的属性，我该怎么办？

What should I do if I don't want to set the required attribute for some of my HTML input tags inside a form?

html

css

forms

css-selectors

required