CSS input[type="type"] need quotes? [duplicate]

Question

This question already has answers here:

CSS attribute selectors: The rules on quotes (", ' or none?) (2 answers)

Closed 8 years ago.

I have always thought that the CSS input[type] selector needs quotes to specify the type, e.g.:

input[type="email"], input[type="text"]

Now I downloaded a couple of styled checkboxes and the CSS reports:

input[type=checkbox] {
     display:none;
}

Are the quotes needed or it's just the same thing with or without them?

Answer 1

No, quotes are not needed as per the CSS grammar rules.

The rules are a bit confusing, but here is the relevant production. Note how the value can be an identifier (unquoted for word-like values) or a quoted string.

attrib
  : '[' S* IDENT S* [ [ '=' | INCLUDES | DASHMATCH ] S*
    [ IDENT | STRING ] S* ]? ']'

And the relevant tokens:

ident       -?{nmstart}{nmchar}*
nmstart     [_a-z]|{nonascii}|{escape}
nmchar      [_a-z0-9-]|{nonascii}|{escape}

string      {string1}|{string2}
string1     \"([^\n\r\f\\"]|\\{nl}|{escape})*\"
string2     \'([^\n\r\f\\']|\\{nl}|{escape})*\'

The astute reader might have noticed that "nonascii" is allowed in an identifier character: outside of the ASCII plane, all Unicode characters are technically allowed in an identifier. From a practical perspective, however, I recommend quotes in anything but "trivial" cases.