如何根据后续元素的无效性设置html元素的样式？

Question

使用CSS规则，当以下输入文本元素的值不包含值时，我想设置按钮元素的背景色。输入元素具有只读属性和必需属性，并在单击上一个按钮时获取其值。使用required属性会使输入值在输入值为空时无效，而在值不为空时有效。

在w3schools.com CSS参考选择器页面上，似乎适用的唯一规则是：

Rule                    Example Example Description
=====================   ======= ============================================
element1 + element2     p + ul  Selects all <p> elements that are placed immediately
                                after <div> elements
element1 ~ element2     p ~ ul  Selects every <ul> element that are preceded
                                by a <p> element

但是，这些规则都不能完全满足我的要求，因为输入之前的按钮是应该受到规则影响的元素。

这是一个非常简化的示例，显示了按钮和输入元素：

<style>
  #inp:invalid ~ .btn {
    background-color: yellow;
  }
</style>
<form>
  <button class="btn">Button</button>
  <input type="text" id="inp" placeholder="?"  required readonly>
</form>    

当输入值为空时，按钮元素应显示一个黄色按钮，但普通按钮背景永远不会改变。没有错误发生。

如果CSS无法处理此问题，那么jQuery或Javascript呢？

重复吗？当我发布问题时，我查看了建议的答案，但没有一个适用。你能指出我任何问题吗？