javascript - 背景大小不受输入字段影响

Question

我将下面两个按钮的背景大小设置为 100% 0%，因为我想在输入文本并选中所有单选字段时显示“单选”按钮。但是“文本”按钮已经显示，但没有在输入字段中输入任何内容。但是当我删除 radio 场时它起作用了，是什么导致了这个问题？

  button {
   color: #FFF;
   border: none;
   background-color: transparent;
   transition: all 1s;
   border-radius: 10px;
   padding: 20px 50px;   
   background-image: linear-gradient(to top, #1e5799 0%, #2989d8 100%);
   background-position: 100% 100%;
   background-size: 100% 0%;
   background-repeat: no-repeat;
 }
  :checked ~ div > button:first-child {
   background-size: 100% 25%;
 }

 :checked ~:checked ~ div > button:first-child {
   background-size: 100% 50%;
 }
 
 :checked ~:checked ~:checked ~ div > button:first-child {
   background-size: 100% 75%;
 }
 
 :checked ~:checked ~:checked ~:checked ~ div > button:first-child {
   background-size: 100% 100%;
 }
:valid ~ div > button:nth-child(2) {
   background-size: 100% 25%;
 }

 :valid ~:valid ~ div > button:nth-child(2) {
   background-size: 100% 50%;
 }
 
 :valid ~:valid ~:valid ~ div > button:nth-child(2) {
   background-size: 100% 75%;
 }
 
 :valid ~:valid ~:valid ~:valid ~ div > button:nth-child(2) {
   background-size: 100% 100%;
 }

 div {
   padding: 20px;
 }

R1 <input type="radio" name="">
R2 <input type="radio" name="">
R3 <input type="radio" name="">
R4 <input type="radio" name="">
Name <input type="text" name="" required=required>
Last <input type="text" name="" required=required>
Address <input type="text" name="" required=required>
Age <input type="text" name="" required=required>
<div>
  <button>Radio</button>
  <button>Text</button>
</div>

Answer 1

1. 将 :valid 更改为 :invalid(并切换了百分比)。
2. 为 100% 100% 背景使用了 :not(:invalid) 选择器。

button {
   color: #FFF;
   border: none;
   background-color: transparent;
   transition: all 1s;
   border-radius: 10px;
   padding: 20px 50px;   
   background-image: linear-gradient(to top, #1e5799 0%, #2989d8 100%);
   background-position: 100% 100%;
   background-size: 100% 0%;
   background-repeat: no-repeat;
 }
  :checked ~ div > button:first-child {
   background-size: 100% 25%;
 }

 :checked ~:checked ~ div > button:first-child {
   background-size: 100% 50%;
 }
 
 :checked ~:checked ~:checked ~ div > button:first-child {
   background-size: 100% 75%;
 }
 
 :checked ~:checked ~:checked ~:checked ~ div > button:first-child {
   background-size: 100% 100%;
 }
:not(:invalid) ~ div > button:nth-child(2) {
   background-size: 100% 100%;
 }
 :invalid ~ div > button:nth-child(2) {
   background-size: 100% 75%;
 }
 :invalid ~:invalid ~ div > button:nth-child(2) {
   background-size: 100% 50%;
 }
 
 :invalid ~:invalid ~:invalid ~ div > button:nth-child(2) {
   background-size: 100% 25%;
 }
 
 :invalid ~:invalid ~:invalid ~:invalid ~ div > button:nth-child(2) {
   background-size: 100% 0%;
 }

 div {
   padding: 20px;
 }

R1 <input type="radio" name="">
R2 <input type="radio" name="">
R3 <input type="radio" name="">
R4 <input type="radio" name="">
Name <input type="text" name="" required=required>
Last <input type="text" name="" required=required>
Address <input type="text" name="" required=required>
Age <input type="text" name="" required=required>
<div>
  <button>Radio</button>
  <button>Text</button>
</div>

更新

这里是关于:valid的解释:

因为复选框输入存在并且它们没有 required 属性 - 它们是有效的。所以在 button:nth-child(2) 之前实际上有 4 个 :valid 元素，这意味着您会将背景设置为 100% 100% 。 如果您愿意 - 您可以确保 :valid 选择器仅适用于常规文本字段:input[type=text]:valid 这将解决问题(另一种选择是为这些字段设置一个类)。

检查此更新(仅基于您的代码，使用 :valid 选择器):

button {
   color: #FFF;
   border: none;
   background-color: transparent;
   transition: all 1s;
   border-radius: 10px;
   padding: 20px 50px;   
   background-image: linear-gradient(to top, #1e5799 0%, #2989d8 100%);
   background-position: 100% 100%;
   background-size: 100% 0%;
   background-repeat: no-repeat;
 }
  :checked ~ div > button:first-child {
   background-size: 100% 25%;
 }

 :checked ~:checked ~ div > button:first-child {
   background-size: 100% 50%;
 }
 
 :checked ~:checked ~:checked ~ div > button:first-child {
   background-size: 100% 75%;
 }
 
 :checked ~:checked ~:checked ~:checked ~ div > button:first-child {
   background-size: 100% 100%;
 }
input[type=text]:valid ~ div > button:nth-child(2) {
   background-size: 100% 25%;
 }
input[type=text]:valid ~input[type=text]:valid ~ div > button:nth-child(2) {
   background-size: 100% 50%;
 }
 
 input[type=text]:valid ~input[type=text]:valid ~input[type=text]:valid ~ div > button:nth-child(2) {
   background-size: 100% 75%;
 }
 
 input[type=text]:valid ~input[type=text]:valid ~input[type=text]:valid ~input[type=text]:valid ~ div > button:nth-child(2) {
   background-size: 100% 100%;
 }
 div {
   padding: 20px;
 }

R1 <input type="radio" name="">
R2 <input type="radio" name="">
R3 <input type="radio" name="">
R4 <input type="radio" name="">
Name <input type="text" name="" required=required>
Last <input type="text" name="" required=required>
Address <input type="text" name="" required=required>
Age <input type="text" name="" required=required>
<div>
  <button>Radio</button>
  <button>Text</button>
</div>