Can I add a placeholder to an input using CSS?-CodePudding

I just want to add placeholder="Search" to the input inside a div, it comes from a file bootstrap file so I try to edit using css. Here the div:

<div id="items-data-table_filter" >
  <label>
   <input type="search"  placeholder="" aria-controls="items-data-table">
   </label>
</div>

CodePudding user response：

No, as @randomcoder66785 pointed out, you can use ::placeholder to style the input. But any placeholder text must be defined via the html tag placeholder. You can even use JS to do that.

The simplest implementation would be this:

<div id="items-data-table_filter" >
  <label>
   <input type="search"
          
          placeholder="Search" 
          aria-controls="items-data-table">
   </label>
</div>

CodePudding user response：

By using the ::placeholder selector,you can style and design the placeholder using your own codes. Here's the W3Schools link:

https://www.w3schools.com/cssref/sel_placeholder.asp

CodePudding user response：

   <input type="search"  placeholder="Search" aria-controls="items-data-table">