David JorHpan David JorHpan - 1 month ago 7
CSS Question

Background-size is not affected by input fields

I set the background-size to

100% 0%
for both buttons below, for I want to show the "radio" button when text is put into the inputs and all radio fields are checked. But the "Text" button is already shown without anything put into the input fields. But when I remove the radio fields it works, what is causing this issue?



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. Changed the :valid to :invalid (and switched the percentages).
  2. Used the :not(:invalid) selector for the 100% 100% background.

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>

Update

Here is the explanation regarding the :valid:

Because the checkbox inputs exists and they don't have the required attribute - they are valid. So you actually have 4 :valid elements before the button:nth-child(2), which mean you will have the background set to to 100% 100%. If you want - you can make sure that the :valid selector will be only for the regular text-fields: input[type=text]:valid and this will solve the problem (Another option is to set a class to these fields).

Check this update (based only your code, with the :valid selector):

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>

Comments