輸入 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"/>