How do I style a placeholder with different colors for different input fields using CSS?
Benjamin C

By default, styling placeholders with different colors for different input fields using only CSS can be challenging, as CSS does not provide a direct way to target and style placeholders specifically. However, you can utilize some CSS tricks and techniques to achieve this effect. Here's a step-by-step guide on how to style placeholders with different colors for different input fields using CSS: 1. HTML Markup:

1
2
3
4
  <input type="text" class="input-field" placeholder="Placeholder Text 1">
   <input type="text" class="input-field" placeholder="Placeholder Text 2">
   <input type="text" class="input-field" placeholder="Placeholder Text 3">

In this example, we have three input fields with the classinput-field. Each input field has a different placeholder text. 2. CSS Styling:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 .input-field {
     position: relative;
   }

   .input-field::placeholder {
     color: #999999; /* Default placeholder color */
   }

   .input-field.placeholder1::placeholder {
     color: red; /* Placeholder color for input field with class placeholder1 */
   }

   .input-field.placeholder2::placeholder {
     color: blue; /* Placeholder color for input field with class placeholder2 */
   }

   .input-field.placeholder3::placeholder {
     color: green; /* Placeholder color for input field with class placeholder3 */
   }

The.input-field class is applied to all input fields and sets theposition property torelative. This is necessary for the next step. The::placeholder pseudo-element is used to style the placeholders. By default, all placeholders have a color of#999999. To style the placeholders with different colors for specific input fields, you can add additional class selectors. In this example, we use.input-field.placeholder1::placeholder,.input-field.placeholder2::placeholder, and.input-field.placeholder3::placeholder to target and style the placeholders for input fields with the classesplaceholder1,placeholder2, andplaceholder3, respectively. You can add more classes as needed, following the same pattern. 3. Applying Class to Input Fields: To apply the appropriate class to each input field, you can modify the HTML markup as follows:

1
2
3
4
  <input type="text" class="input-field placeholder1" placeholder="Placeholder Text 1">
   <input type="text" class="input-field placeholder2" placeholder="Placeholder Text 2">
   <input type="text" class="input-field placeholder3" placeholder="Placeholder Text 3">

By adding the desired class to each input field, you can specify which placeholder color should be applied. By following these steps, you can style placeholders with different colors for different input fields using CSS. Each input field is assigned a unique class, and the corresponding placeholder color is defined in the CSS using class selectors combined with::placeholder. Remember to adjust the class names and color values to match your design requirements.

Similar Questions