css选择器匹配没有属性x的元素

Question

我正在研究CSS文件并发现需要设置文本输入框的样式,但是,我遇到了问题.我需要一个匹配所有这些元素的简单声明:

<input />
<input type='text' />
<input type='password' />

......但不符合这些:

<input type='submit' />
<input type='button' />
<input type='image' />
<input type='file' />
<input type='checkbox' />
<input type='radio' />
<input type='reset' />

这就是我想做的事情:

input[!type], input[type='text'], input[type='password'] {
   /* styles here */
}

在上面的CSS中,注意第一个选择器是input[!type].我的意思是我想选择未指定type属性的所有输入框(因为它默认为文本但input[type='text']与之不匹配).不幸的是,我找不到CSS3规范中没有这样的选择器.

有谁知道这样做的方法？

Answer 1

:不是选择器

input:not([type]), input[type='text'], input[type='password'] {
   /* style here */
}

支持:在Internet Explorer 9及更高版本中

Answer 2

对于更多跨浏览器的解决方案,您可以按照您希望的方式设置所有输入的样式,非文本和密码,然后另一种样式覆盖无线电,复选框等样式.

input { border:solid 1px red; }

input[type=radio], 
input[type=checkbox], 
input[type=submit], 
input[type=reset], 
input[type=file] 
      { border:none; }

- 要么 -

你生成非类型输入的代码的任何部分都可以为它们提供类似.no-type或根本不输出的类？此外,这种类型的选择可以使用jQuery完成.

Answer 3

只是想添加到这个,你可以使用selectivizr在oldIE中使用:not selector:http://selectivizr.com/