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

Question

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

  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. 使用:not(:invalid)背景的100% 100%选择器。

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属性 - 它们是有效的。因此，您实际上在:valid之前有4 button:nth-child(2)个元素，这意味着您将背景设置为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>