nicc96
0
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?
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>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.
