ansaurus

Question

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

Answer 1

+1 A:

input[type='text'], input[type='password']
{
   // my css
}

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

codemonkeh 2010-08-10 02:07:12

Oh well. CSS4 perhaps? =)

RPM1984 2010-08-10 02:08:40

Answer 2

+1 A:

CSS3 has a pseudo-class called :not()

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

Here's a complete example.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;

<html>
<head>
    <style type="text/css" media="screen">
        input:not([type='checkbox']) {    
            visibility: hidden;
        }  

    </style>
</head>
<body>                  

    <p>If <code>:not()</code> is supported, you'll only see the checkbox.</p>

    <p>
    <input type="text" />
    <input type="password" />
    <input type="checkbox" />
  </p>
</body>
</html>

If you want something that's widely supported now, here's what I would do.

input {
   // styles for most inputs
}   

input[type=checkbox] {
  // revert back to the original style
}

That's technically two selectors, but it saves you from having to think about all of the input types that aren't "checkbox."

Patrick McElhaney 2010-08-10 02:19:55

nice one! thanks. is that CSS3 selector fully supported? (i only really care about IE7+, FF3+, Safari recent, Chrome recent)

RPM1984 2010-08-10 02:41:21

@your edit. Agreed, and i like it. Thanks.

RPM1984 2010-08-10 03:02:44

ansaurus

tags:

views:

answers:

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

related questions