在CSS中,如何在同一括号内设置多种输入样式?

huangapple go评论59阅读模式
英文:

how could I set more than one type of input style in CSS in the same brackets(not big parentheses)?

问题

这是我的代码:

input[class=tUI][type=date], input[class=tUI][type=month], input[class=tUI][type=week], input[class=tUI][type=time] {
  background: red;
}

我想通过一个括号定义多个类型,例如,我想要使用 CSS 来实现 input[class=tUI][type=date || week || month],这是否可能?

英文:

I am trying to make a Web UI framework and when I deal with input , I have to write the type over and over again with the same style. In that case, I want to put them together to shink the size of the file.
<br>
This is my code:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

input[class=tUI][type=date],[class=tUI][type=month],[class=tUI][type=week],[class=tUI][type=time] {
  background:red;
}

<!-- language: lang-html -->

&lt;input type=&quot;week&quot; class=&quot;tUI&quot;&gt;

<!-- end snippet -->

I want to define the type by just using one Brackets. For example, I want input[class=tUI][type=date || week || month] by just using CSS
<br>
How could I get that? Or is it possible?

答案1

得分: 3

<!-- 开始代码段: js 隐藏: false 控制台: true Babel: false -->

<!-- 语言: lang-css -->
input.tUI:is([type=date],[type=month],[type=week],[type=time]) {
  background: red;
}

<!-- 语言: lang-html -->
<input type="week" class="tUI" />
<input type="date" class="tUI" />

<!-- 结束代码段 -->
英文:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

input.tUI:is([type=date],[type=month],[type=week],[type=time]) {
  background:red;
}

<!-- language: lang-html -->

&lt;input type=&quot;week&quot; class=&quot;tUI&quot; /&gt;
&lt;input type=&quot;date&quot; class=&quot;tUI&quot; /&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年2月14日 09:11:12
  • 转载请务必保留本文链接:https://go.coder-hub.com/75442606.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定