css选择器匹配不带属性x的元素\[重复\]

CSS选择器 CSS

泡芙

2020-03-23

我正在处理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属性的输入框(因为它默认为text,但input[type='text']不匹配)。不幸的是,我找不到CSS3规范中的此类选择器。

有人知道实现此目标的方法吗?

第2883篇《css选择器匹配不带属性x的元素\[重复\]》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

2个回答
乐米亚 2020.03.23

只需添加此内容,就可以使用selectivizr在oldIE中使用:not选择器:http ://selectivizr.com/

Gil神奇 2020.03.23

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

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完成这种选择。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android