'Background color in Inputs HTML/CSS

I want to change background color only in Inputs: Input1,

Inputs2 doesn't have to change color

But now they all change color

input[type="time"],
area {
  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" />

page

Input1 Input2

Input1 Input2

How I can do this? how should I write so that only the chosen ones change color?

htmlcss


Solution 1:[1]

You can use input[name$="Input1"] selector to set a background color on all elements that have a class attribute value that ends with 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"/>

Solution 2:[2]

You can do that by applying class to your inputs and change the colour of only those inputs where class is applied.

.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"/>

Solution 3:[3]

Use attribute selector and nth-child, or just *= to detect attributes which contain a certain string.

// 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; 
}

Solution 4:[4]

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;
}

Your HTML is invalid, it cannot contain comments like that, it will break your validity.

Solution 5:[5]

You can use the identifier name to specify which inputs to apply the style to if you don't want to give Input1 its own class. In this case we check for name ending in 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">

Solution 6:[6]

You should give inputs 1 and 2 a specific class :)

.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"/>

Solution 7:[7]

you need to identify each one using its name then and set the desired background color...

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

and your css 

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

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

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

Solution 8:[8]

the best way to help yourself is to create a css class and apply it to your selection.

But if you want to do it as clean as possible you have these ways :

CSS

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

But you have to be sure that the order will never change

OR this way :

CSS

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

Solution 9:[9]

input[type="time"] will target all 4 elements, to target selectively, use name attribute, e.g. input[name="x2"] will only target element with name 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"/>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Mordecai
Solution 2 Priyank Panchal
Solution 3 Greggers
Solution 4 BRO_THOM
Solution 5
Solution 6 Ramon Balthazar
Solution 7 Kai
Solution 8 kihA
Solution 9

Related Questions