如何突出显示可选输入：文本如果它不为空？ [复制]

Question

我找到了:required 输入的解决方案，但没有找到:optional 的解决方案。

感谢您的帮助，对不起我的英语，这不是我的母语。

Answer 1

注意：如果您的目标是现代浏览器并使用占位符（或者您可以使用占位符），您可以使用下面的Irina's :placeholder-shown 伪类而不是而不是 .empty) 并取消 JavaScript。它不适用于 IE 或 Edge v44 或更早版本，但适用于所有最新的现代浏览器。但是：对于 IE 和 Edge v44 及更早版本，您可以使用 -ms-input-placeholder，从而使以下 JavaScript 部分失效。但我不想编辑它以使用:placeholder-shown 和:-ms-input-placeholder，因为这重复了 Irina 的答案（有点），我不能删除这个答案，因为它被接受了。不过，请参阅答案末尾的示例。

---

我找到了 :required 输入的解决方案，但没有找到 :optional 的解决方案。

您可以通过两种方式做到这一点：

1. 您可以使用:not(:required)。 :not 是 negation pseudoclass。它接受simple selector 并反转其含义。 “不需要”是“可选”。

2. 您可以以“可选”方式设置所有输入的样式，然后为 :required 元素覆盖该样式。

不幸的是，对于可选的 input 元素 (more here)，您的问题的“空白”部分无法单独使用 CSS 来回答。

这是 #1 的示例，当输入为/不为空时，使用 JavaScript 添加/删除一个类：

"use strict";
function toggleEmptyClass(el) {
    if (el.tagName === "INPUT") {
        // If you need IE compatibility, you'll need an `if`/`else`;
        // IE doesn't support the second argument for `toggle`
        el.classList.toggle("empty", !el.value);
    }
}
document.querySelectorAll("input").forEach(toggleEmptyClass);
document.addEventListener("input", function() {
    toggleEmptyClass(event.target);
});

input:not(.empty):required {
    background-color: #FF8000;
}
input:not(.empty):not(:required) {
    background-color: #0080FF;
}

<div>
    <label>
        Required:
        <input type="text" required value="required">
    </label>
</div>
<div>
    <label>
        Required and (initially) empty:
        <input type="text" required>
    </label>
</div>
<div>
    <label>
        Optional:
        <input type="text" value="optional">
    </label>
</div>
<div>
    <label>
        Optional and (initially) empty:
        <input type="text">
    </label>
</div>

---

或者您可以只使用“可选”样式设置所有input 元素的样式，然后为:required 元素覆盖它：

例子：

"use strict";
function toggleEmptyClass(el) {
    if (el.tagName === "INPUT") {
        // If you need IE compatibility, you'll need an `if`/`else`;
        // IE doesn't support the second argument for `toggle`
        el.classList.toggle("empty", !el.value);
    }
}
document.querySelectorAll("input").forEach(toggleEmptyClass);
document.addEventListener("input", function() {
    toggleEmptyClass(event.target);
});

input:not(.empty) {
    background-color: #0080FF;
}
input:not(.empty):required {
    background-color: #FF8000;
}

<div>
    <label>
        Required:
        <input type="text" required value="required">
    </label>
</div>
<div>
    <label>
        Required and (initially) empty:
        <input type="text" required>
    </label>
</div>
<div>
    <label>
        Optional:
        <input type="text" value="optional">
    </label>
</div>
<div>
    <label>
        Optional and (initially) empty:
        <input type="text">
    </label>
</div>

---

这是一个完整的示例，展示了使用 :placeholder-shown 和较旧的 Microsoft 特定 -ms-input-placeholder 执行上述操作：

input:not(:placeholder-shown):required {
    background-color: #FF8000;
}
input:not(:placeholder-shown):not(:required) {
    background-color: #0080FF;
}
/* IE and Edge <= v44 support: */
input:not(:-ms-input-placeholder):required {
    background-color: #FF8000;
}
input:not(:-ms-input-placeholder):not(:required) {
    background-color: #0080FF;
}

<div>
    <label>
        Required:
        <input type="text" placeholder="placeholder" required value="required">
    </label>
</div>
<div>
    <label>
        Required and (initially) empty:
        <input type="text" placeholder="placeholder" required>
    </label>
</div>
<div>
    <label>
        Optional:
        <input type="text" placeholder="placeholder" value="optional">
    </label>
</div>
<div>
    <label>
        Optional and (initially) empty:
        <input type="text" placeholder="placeholder">
    </label>
</div>

或者，再次设置所有样式，然后仅覆盖 :required 以使其不同：

input:not(:placeholder-shown) {
    background-color: #0080FF;
}
input:not(:placeholder-shown):required {
    background-color: #FF8000;
}
/* IE and Edge <= v44 support: */
input:not(:-ms-input-placeholder) {
    background-color: #0080FF;
}
input:not(:-ms-input-placeholder):required {
    background-color: #FF8000;
}

<div>
    <label>
        Required:
        <input type="text" placeholder="placeholder" required value="required">
    </label>
</div>
<div>
    <label>
        Required and (initially) empty:
        <input type="text" placeholder="placeholder" required>
    </label>
</div>
<div>
    <label>
        Optional:
        <input type="text" placeholder="placeholder" value="optional">
    </label>
</div>
<div>
    <label>
        Optional and (initially) empty:
        <input type="text" placeholder="placeholder">
    </label>
</div>

Answer 2

找到了这个解决方案，使用:placeholder-shown：

input:placeholder-shown {
  border: 1px solid #f5f5f5;
}

input {
  background: #ffffff;
  border: 10px solid;
  border-image-slice: 1;
  border-width: 1px;
  border-image-source: linear-gradient(
    171.2deg,
    #ffc1d4 15.78%,
    #ff866c 76.58%
  );
}

<form>
  <input type="text" name="name1" id="" placeholder="placeholder1" optional>
  <input type="text" name="name2" id="" placeholder="placeholder2" optional>
</form>

Answer 3

这是一个使用 javascript 和 css 的解决方案

CSS：

.highlighted
      {
        border: hsl(180, 60%, 60%) 2px solid;
      }

JS：

        let inputs = document.querySelectorAll('input:optional');
        for (let input of inputs)
        {
            input.addEventListener('change',function(e)
            {
              if (this.value != '')
              {
                this.classList.add('highlighted');
              }
              else
              {
                this.classList.remove('highlighted');
              }
            });
        }