Question

我在后台有一个带有视频的表单。如果在输入框中没有输入文本，我希望它们具有不透明度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;
}

有什么想法吗？

Answer 1

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

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

<input required type="text">

<textarea required></textarea>

如果不是首选，那么您需要像评论者建议的那样使用JavaScript路线。

Answer 2

有一个CSS伪类@From(eventtable='rdbms', datasource.name='WSO2_CARBON_DB', table.name='pharming_incident') define table pharming_incident (phi_id_pharming_incident long, phi_id_license int, phi_machine_user_id string, phi_date string, phi_machine_user_date string, phi_protected_site string, phi_pharming_glp string, phi_user_ip string, phi_dsb_version string, phi_os string, phi_os_version string, user_id int);，用于检测占位符是否存在。不幸的是，这是CSS Level 4的规范，它只在编写本文时适用于WebKit浏览器。

:placeholder-shown

input:placeholder-shown {
  background: black;
}

输入文本时形成切换颜色（CSS）

2 个答案: