Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Select all input tags where type is not checkbox

Select all input tags where type is not checkbox

Problem

I need CSS Selector that match all Input Tags where type is not checkbox.

This match:

...but this does not:

Because type is checkbox!

This is what I have at the moment:

input:not(type="checkbox")

Unfortunately, it does not work!

So here comes my questions:

  1. How to fix my CSS3 selector?
  2. Is it possible without CSS3 and JavaScript?
  3. Is it possible without CSS3, but with use of JavaScript?

Thanks in any advice!

Problem courtesy of: daGrevis

Solution

  1. Your attribute selector is missing the square brackets:

    input:not([type="checkbox"])
    
  2. If you're applying styles you will need to make use of an override rule in CSS:

    input {
        /* Styles for all inputs */
    }
    
    input[type="checkbox"] {
        /* Override and revert above styles for checkbox inputs */
    }
    

    As you can imagine, it's almost impossible to do this for form elements because their browser-default styles aren't well-defined in CSS.

  3. jQuery provides a :checkbox selector that you can use:

    $('input:not(:checkbox)')
    

    You can also use the same selector as you do in CSS:

    $('input:not([type="checkbox"])')
    
Solution courtesy of: BoltClock

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Select all input tags where type is not checkbox

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×