如何使用 css 更改输入占位符文本

Question

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

Here is the html code:

<div class="col">
      <input class="form-control" 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?

Answer 1

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 class="col"> <input class="form-control" type="text" placeholder="" id="myID"> </div>

Answer 2

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 2 index.