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

原文 标签 javascript html css

我将背景大小设置为 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>

最佳答案

  • 更改了 :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>

    关于javascript - 背景大小不受输入字段的影响,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40126455/

    相关文章:

    javascript - 如何使用JS设置输入值

    javascript - Tinymce 为自定义样式添加快捷方式

    Javascript如何确定它是否是逗号分隔的列表?

    jquery - 基本jQuery slider (BJQS)不将样式应用于jQuery和XML生成的li元素

    html - 我需要为特定的类和ID应用CSS

    html - Z-index 仅适用于 chrome

    javascript - 从JavaScript调用代码隐藏

    html - 显示“无JavaScript” div,但不显示google/facebook共享服务

    php - 需要有关从表单更新数据库的建议

    jquery - jQuery幻灯片代码不起作用