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

更改了 :valid至:invalid (并切换百分比)。

使用了: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属性 - 它们是有效的。所以你实际上有 4 :valid 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>