如果存在文本，则更改表单输入背景颜色答案

【问题标题】：change form input background color if text present如果存在文本，则更改表单输入背景颜色
【发布时间】：2021-12-06 06:29:20
【问题描述】：

我的目标：我想要三种背景颜色状态，空（无文本/选择）、焦点（输入文本/选择）和非空（显示文本/选择） .如果输入文本/进行选择，我已经能够设置空输入的颜色并更改背景。但是，一旦用户进入下一个输入，原始背景颜色就会返回，表示它是空的还是满的。

我尝试了各种 CSS 解决方案，一些 javascript，但我不太擅长 javascript。我查看了堆栈寻求帮助，搜索了谷歌，尝试了各种解决方案，但没有任何效果。

我的 CSS： /* 黄色精简版 #d3f8d3 浅绿色 */ 表单输入：空，形成文本区域：空{ 背景颜色：#fff1a6！重要； }

/*  light green     #d3f8d3    lightgreen  */
form input,
form textarea {
    background-color: lightpink!important;
    }

form input:focus, 
form textarea:focus {
    background-color: #d3f8d3!important;
    }

我的表单输入示例：

<div class="form-outline   bg_color-white">
    <input type="text"   id="discordIS"   name="discordIS"   value="<?=$discordIS;?>"   class="form-control"   required />
    <label class="form-label" for="discordIS">Discord NAME</label>
</div>

【问题讨论】：

:empty 是错误的伪类，因为这是用于没有 children 的元素（输入字段和文本区域永远不会这样做。）你应该查看:valid/:invalid 以结合required 属性处理空字段。

标签： css forms input background-color

【解决方案1】：

您可以通过在输入或 textarea 元素中引入必需的属性来在一定程度上使用 CSS。

这意味着您最终会得到更多状态：有效/无效/焦点，因此可以有 3 向着色。

显然，您需要尝试确定您想要的状态组合（以及是否实际需要输入，或者是否仅用于此着色）。

input:invalid {
  background: pink;
}

input:focus {
  background: cyan;
}

input:valid {
  background: lime;
}

&lt;input required/&gt;

【讨论】：