SCSS / CSS选择器选择所有输入类型

CSS

小小

2020-03-23

我有一些输入类型具有此scss设置（来自框架）

textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
...
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
{
  @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
}

我喜欢覆盖/重置所有类似的东西

textarea,
input[type="*"],
{
  @include box-shadow(none);
}

以上不起作用，也

textarea,
    input,
    {
      @include box-shadow(none);
    }

不够具体。除了列出所有可能的类型之外，还有什么方法可以做到这一点。

谢谢。

第2918篇《SCSS / CSS选择器选择所有输入类型》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
Jim神无 2020.03.23

这样就足够了吗？

input[type="text"] {
    border: 1px red;
}

input[type] {
    border: 1px solid blue; }
}

They both have the same specificity, so the last one overrides.

See jsFiddle: http://jsfiddle.net/TheNix/T2BbG/

Another solution would be to ommit the element from the first selector. The latter would have higher specificity – however, you should know that in terms of performance, the first one is similar to using an universal selector (as it attempts to match all elements in the DOM, to check for the attribute).

[type="text"] {
    border: 1px red;
}

input[type="text"] {
    border: 1px solid blue; }
}
老丝阿飞 2020.03.23

有很多可能的输入类型。如果您想要textareas和任何具有type属性的输入，则...

textarea,
input[type] {
    ...
}

如果要排除某些输入类型，请使用:not选择器。 编辑示例JSFIDDLE http://jsfiddle.net/Pnbb8/

textarea,
input[type]:not([type=search]):not([type=url]):not([type=hidden]) {

}

但是就像我说的那样，您不想要的类型可能要比您想要的类型多得多，因此您无法真正避免使用该列表。

您总是可以改用CSS类。

.box-shadowed
{
  @include box-shadow(none);
}

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

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