CSS Input Type Selectors - Possible to have an “or” or “not” syntax?

前端 未结 2 727
挽巷
挽巷 2021-02-01 00:14

If they exist in programming),

If I have an HTML form with the following inputs:





        
相关标签:
2条回答
  • 2021-02-01 00:44

    CSS3 has a pseudo-class called :not()

    input:not([type='checkbox']) {    
        visibility: hidden;
    }
    <p>If <code>:not()</code> is supported, you'll only see the checkbox.</p>
        	                              
    <ul>
      <li>text: (<input type="text">)</li>  
      <li>password (<input type="password">)</li>    	
      <li>checkbox (<input type="checkbox">)</li> 
     </ul>


    Multiple selectors

    As Vincent mentioned, it's possible to string multiple :not()s together:

    input:not([type='checkbox']):not([type='submit'])
    

    CSS4, which is not yet widely supported, allows multiple selectors in a :not()

    input:not([type='checkbox'],[type='submit'])
    


    Legacy support

    All modern browsers support the CSS3 syntax. At the time this question was asked, we needed a fall-back for IE7 and IE8. One option was to use a polyfill like IE9.js. Another was to exploit the cascade in CSS:

    input {
       // styles for most inputs
    }   
    
    input[type=checkbox] {
      // revert back to the original style
    } 
    
    input.checkbox {
      // for completeness, this would have worked even in IE3!
    } 
    
    0 讨论(0)
  • 2021-02-01 00:54
    input[type='text'], input[type='password']
    {
       // my css
    }
    

    That is the correct way to do it. Sadly CSS is not a programming language.

    0 讨论(0)
提交回复
热议问题