输入 HTML/CSS 中的背景颜色

Question

对不起，请删除此主题......

Answer 1

您可以使用input[name$="Input1"]选择器为类属性值以Input1结尾的所有元素设置背景颜色。

 input[name$="Input1"] { background-color : #d1d1d1; }

 <input type="time" name="x1 //(comment) Input1"/> <input type="time" name="x2 //(comment) Input1"/> <input type="time" name="x3 //(comment) Input2"/> <input type="time" name="x4 //(comment) Input2"/>

Answer 2

您可以通过将class应用于您的输入并仅更改应用class的那些输入的颜色来做到这一点。

 .changeColor, area { background-color : #d1d1d1; }

 <input type="time" class="changeColor" name="x1 //(comment) Input1"/> <input type="time" class="changeColor" name="x2 //(comment) Input1"/> <input type="time" name="x3 //(comment) Input2"/> <input type="time" name="x4 //(comment) Input2"/>

Answer 3

使用属性选择器和 nth-child，或者只是 *= 来检测包含某个字符串的属性。

// the attribute contains 'time' and is first child
input[type="time"]:nth-child(1){
  background-color : #d1d1d1; 
}
// the 'attribute contains x1 etc....'
input[name*="x1"]{
  background-color : #d1d1d1; 
}

Answer 4

如果您不想为 Input1 提供自己的类，则可以使用标识符name来指定要将样式应用于哪些输入。 在这种情况下，我们检查name期末Input1 。

 input[name$="Input1"], area { background-color : #d1d1d1; }

 <input type="time" name="x1 Input1"> <input type="time" name="x2 Input1"> <input type="time" name="x3 Input2"> <input type="time" name="x4 Input2">

Answer 5

HTML

<input type="time" name="x1"/> 
<input type="time" name="x2"/> 
<input type="time" name="x3"/> 
<input type="time" name="x4"/> 

CSS

input[name="x1"], 
input[name="x2"] {
    background-color: #d1d1d1;
}

你的 HTML 是无效的，它不能包含这样的评论，它会破坏你的有效性。

Answer 6

你应该给输入 1 和 2 一个特定的类:)

.grayButton, area {
   background-color: #d1d1d1;
}

<input class="grayButton" type="time" name="x1"/> 
<input class="grayButton" type="time" name="x2"/> 
<input type="time" name="x3"/> 
<input type="time" name="x4"/>

Answer 7

您需要使用其名称识别每个人，然后设置所需的背景颜色...

<input type="time" name="x1"/> 
 <input type="time" name="x2"/> 
 <input type="time" name="x3"/> 
 <input type="time" name="x4"/>

和你的 css

input[name="x1"] {
background-color : #d1d1d1; 
}

input[name="x2"] {
background-color : lightcoral; 
}

input[name="x3"] {
background-color : lightblue; 
}

Answer 8

帮助自己的最佳方法是创建一个 css 类并将其应用于您的选择。

但如果你想尽可能干净，你有这些方法：

CSS

 input[type='time']:nth-child(1), input[type='time']:nth-child(2){ background-color: #d1d1d1; }

但你必须确保顺序永远不会改变

或者这样：

CSS

 input[name="x1"], input[name="x2"] { background-color: #d1d1d1; }

Answer 9

input[type="time"]将定位所有 4 个元素，有选择地定位，使用name属性，例如input[name="x2"]将仅定位名称为x2元素

 input[type="time"], area { background-color : #d1d1d1; } input[name="x2"], area { background-color : red; }

 <input type="time" name="x1"/> <input type="time" name="x2"/> <input type="time" name="x3"/> <input type="time" name="x4"/>