How to change input placeholder text with css-CodePudding

I need to change the placeholder text of an input textbox via css.

Here is the html code:

<div >
      <input  type="text" placeholder="" id="myID">
</div>

And here is the css one:

#myID::placeholder{content:"Type something";}

I can't write the placeholder directly inside the html code and not even with JS. Is there a way to solve this?

CodePudding user response：

As said in the comments, you can not use pseudo-elements on replaced elements such as input (or images). So you have to apply it to the wrapping element. A method with many downsides that need more solutions and fixed that are caused by the hack:

div {
  display: inline-block; /* reduces the width to the input */
  position: relative; 
}

div::after {
  content: "type something";
  position: absolute; 
  inset: 0; /* uses the same size as the div */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: -1; /* moves the placeholder to the background and makes the inptu clickable */
}

input {
  background: transparent; /* required to see the placehodler while in the background */
}

input:focus {
  background: white; /* hides the placeholder on focus */
}

<div >
  <input  type="text" placeholder="" id="myID">
</div>

CodePudding user response：

in JS:

let myID = document.getElementById('myID');
myID[0].attributes[2].textContent = 'Hello there!';

You will need to check which index of the attributes object of myID exist placeholder.

I tried here directly on the search bar, the placeholder was on the