输入文本时表单切换颜色（CSS）答案

【问题标题】：Form switching color when text is entered (CSS)输入文本时表单切换颜色（CSS）
【发布时间】：2016-08-29 02:34:32
【问题描述】：

我有一个后台带有视频的表单。当输入框中没有输入文本时，我希望它们的不透明度为 0。但是当值不为零时，我希望它们具有背景颜色。我在想我可以为此使用占位符。

现在我只显示输入焦点时的背景颜色，如下所示

.for_ajax_contact #contactform input[type="text"]:focus, .for_ajax_contact #contactform textarea:focus {
	outline-width: 0;
	background-color: #fff;
	opacity: 0.8;
	transition: all 0.3s linear 0s !important;
	-webkit-transition: all 0.3s linear 0s !important;
}

有什么想法吗？

【问题讨论】：

你能添加完整的代码示例吗？
您可能必须使用 javascript 来完成此操作。

标签： css forms web placeholder

【解决方案1】：

您可以在没有 JavaScript 的情况下执行此操作，但有一个问题。您需要在 textarea/input 上使用 HTML5 required 属性，并在每个表单元素上设置 :valid 伪类的样式。

input,
textarea {
  background: white;
}

input:valid,
textarea:valid {
  background: green;
  color: white;
}

<input required type="text">

<textarea required></textarea>

如果这不是首选，您需要按照评论者的建议走 JavaScript 路线。

【讨论】：

【解决方案2】：

有一个 CSS 伪类 :placeholder-shown 可以检测占位符是否存在。不幸的是，这在 CSS Level 4 的规范中，在撰写本文时它仅适用于 WebKit 浏览器。

input:placeholder-shown {
  background: black;
}

&lt;input placeholder="Test" /&gt;

【讨论】：