如果文本字段为空，则更改按钮元素的样式

Question

如果#postBtn为空，我想更改#textfield的样式，例如

#postBtn:[#textfield.value.length==0]{
         border-color:gray;
         background-color:gray;
}

在html中：

<input id='textfield'>
<input type="button"  Value="Post" onClick="post()" id="postBtn">

如何在没有javascript的情况下实现此目的？ 谢谢！

Answer 1

好的，您可以将required添加到输入字段中，如下所示：

<input id='textfield' required>
<input type="button"  Value="Post" onClick="post()" id="postBtn">

然后，使用:invalid和相邻的兄弟选择器（+），如果字段为空，则可以设置按钮的样式：

#textfield:invalid + #postBtn {
    background-color: red;
}

以下是其中的一个小提琴：http://jsfiddle.net/w7377/

注意：如果文本输入字段实际上不是必填字段，则此解决方案不是可行的方法。如果是这种情况，您可能必须使用Javascript解决方案。